如何停止将事件从父 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

原文由 Rahul Chakrabarty 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

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

原文由 iurii_n 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

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

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

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

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

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

原文由 Elec 发布，翻译遵循 CC BY-SA 3.0 许可协议