stopImmediatePropagation() of sibling not working

Question

Я показываю поле поиска на некотором текстовом клике и скрываю его при разрыве поиска.

Но если я нажму на кнопку поиска, я не хочу скрыть поле ввода и не дать ему скрыться (из-за размытия). Я пробовал stopImmediatePropagation() без везения.

Вот код:

// Not working. when search button is pressed, disable hiding the search input 
$('.search-contacts-container > button').on('click touchstart', function(e) { 
    alert('xxx'); 
    e.stopImmediatePropagation(); 
}) 

// when search input is blurred, hide it 
$('#search-contacts').on('blur', function() { 
    $('.search-contacts-container').addClass('visuallyhidden'); 
    $('#search-contacts').attr('required', 'false').blur(); 
}) 

// when search input is focused, show it 
$('#search-contacts').on('focus', function() { 
    $('.search-contacts-container').removeClass('visuallyhidden'); 
    $('#search-contacts').attr('required', 'true'); 
}) 

// on search text click, show the search input 
$('.js-show-search').on('click touchstart', function() { 
    if ($('.search-contacts-container').is('.visuallyhidden')) { 
    $('.search-contacts-container').removeClass('visuallyhidden'); 
    $('#search-contacts').attr('required', 'true').focus(); 
    } else { 
    $('.search-contacts-container').addClass('visuallyhidden'); 
    $('#search-contacts').attr('required', 'false').blur(); 
    } 
}) 

HTML:

<span class="js-show-search" title="Search for contacts">Search</span> 

<form action="search" method="post" class="form-search search-contacts-container visuallyhidden"> 
    <input type="text" id="search-contacts" placeholder="Search" required="false" /> 
    <button type="submit" class="form-search__button" title="Search"></button> 
</form> 

Демо: http://jsfiddle.net/un775/

Любые идеи?

Answer 1

Проверьте мой новый JsFiddle. Я использую этот метод для повседневных задач. Надеюсь, это поможет вам.

В основном, что вы делаете, это добавление фона, который маскирует все, что находится за ним, а затем добавляет клик даже слушателю, который скрывает все. Форма/вход находится перед фоном, позволяя вам взаимодействовать с ним.

HTML

<div id="js-show-search">...</div> 

<form id="search-contacts" class="hide">...</form> 
<div id="background" class="hide"></div> 

JavaScript

var searchContact, background; 

searchContact = $('#search-contacts'); 
background = $('#background'); 

$('#js-show-search').on('click', function(){ 
    //remove .hide to show elements 
}); 

$('#background.close').on('click', function(){ 
    //add .hide to hide elements 
}); 

CSS

html, body { 
    height: 100%; 
} 

#background { 
    height: 100%; 
    width: 100%; 
    position: absolute; 
    top:0; 
    left: 0; 
    z-index: 0; 
} 

#search-contacts { 
    position: relative; 
    z-index: 1; 
    display: inline-block; 
} 

.hide { 
    display: none!important; 
} 

http://jsfiddle.net/un775/7/