javascript - sibling 的 stopImmediatePropagation() 不工作

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/