如何停止将事件从父div传播到子div

Question

我想在我的html中停止从父div到子传播事件div.这是一个简单的代码,我正在尝试做什么:

<div>
  <div id='categoryList'>
    <div class='listed-category'>
      <span>some content</span>
      <a id='close'>x</a> //"a" is used to remove the div
    </div>
  </div>
</div>
<div id='dropdown'>
</div>

在上面的代码,如果我点击<div id='categoryList'>了<div id='dropdown'>贝娄代码将滑动,向上和向下.

$(document).ready(function () {

    $('#categoryList').click(function (event) {
        event.preventDefault();
        event.stopPropagation();
        if ($('#dropdown').is(":visible")) {
            $('#dropdown').slideUp(400);
        }
        else {
            $('#dropdown').slideDown(400);
        }
    });
})

但是,当我点击孩子时<div class='listed-category'>,上面的JavaScript会执行,并且<div id='dropdown'>会上下滑动.怎么阻止这个？然而,我希望能够点击<a id='close'>删除孩子div

Answer 1

检查匹配点击对象的目标.在click事件处理程序的开头尝试此代码.

if( event.target !== this ) {
       return;
}
//...do stuff.. 

Answer 2

你需要停止在孩子而不是父母中传播，所以你应该写这个：

 $('.listed-category').click(function(event){
    event.stopPropagation();
});

如果你也想点击a标签并停止传播，你还需要这样写：

 $('a#close').click(function(event){
    event.stopPropagation();
});

无论如何，我会建议尤里的答案。我只是想让你知道你应该把event.stopPropagation()孩子（如果你不希望父母的事件运行），而不是父母。