3

我有一个委托父母，他们在一组具有特定班级的孩子中侦听点击事件。

$(".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 的这些子子级将事件传播给父级？或者在某些情况下允许它？

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

4

2 回答 2

5

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

从此处复制线程的评论以供将来参考：

MikeW：解决 .live() 事件传播问题。动态创建的节点在其父节点收到事件之前不会收到事件。这将导致时髦和 stopPropagation 和 preventDefault 不会解决这个问题。修复：添加行

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

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

于 2012-02-05T22:10:31.973 回答
3

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

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

    ...
});
于 2012-02-14T16:45:50.390 回答