如何阻止孩子传播由实时/委托侦听器触发的事件？

Question

我有一个委托父级，用于侦听具有特定类别的一组子级中的单击事件。

$(".toggle_group").on("click",".toggle",function(e){ .. });

所以这里是 html 的一个示例，

<div class='toggle_group'>
  <a class='toggle'>click me and i toggle <div>Im a child of toggle</div></a>
  <a class='toggle'>click me and i toggle <div>Im a child of toggle</div></a>
  <a class='toggle'>click me and i toggle <div>Im a child of toggle</div></a>
  <a class='toggle'>click me and i toggle <div>Im a child of toggle</div></a>
</div>

问题是 a.toggle 的子级将事件传播给父级，在不应该触发处理程序的情况下触发处理程序。根据 jQuery 文档，您无法停止实时/委托事件侦听器上的事件传播。

如何阻止 a.toggle 的这些子子级将事件传播给父级？或者在某些情况下可能允许这样做？

您会看到 .toggle 的内部 div 应该是一个下拉菜单。当您单击菜单时，它不应该切换，只有当您单击切换链接时...

Answer 1

检查此页面中的评论，至少有一些声称找到了解决方法。 http://api.jquery.com/event.stopPropagation/

从此处复制了线程的评论备查：

迈克W：
解决 .live() 事件传播问题。已创建节点
动态地不会收到事件，直到他们的父母已经
收到了。这会导致时髦并停止传播
PreventDefault 无法解决此问题。要修复：添加行

if(event.target != this){ return true; }

到父节点事件处理程序的顶部。这将阻止
当事件实际上被发送到 a 时，父事件不会被触发
子节点，并且（与 return false 不同）会将事件传播到
预期节点。

Answer 2

另一种方法是仅当事件来自具有 .toggle 类（或其子级之一）的元素（而不是 .toggle_group 元素本身）时才执行函数处理程序。

$(".toggle_group").on("click",".toggle",function(e){
    if (!$(e.target).is(".toggle")) return;

    ...
});