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/

复制来自此处的帖子的评论以供将来参考：

MikeW：   解决.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;

    ...
});

如何阻止孩子传播由live / delegate listener触发的事件？

2 个答案: