[英]How do you stop children from propagating an event triggered by a live/delegate listener?
我有一个委托父母,用于监听具有特定类的一组子项中的单击事件。
$(".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
子a.toggle
将事件传播给父节点,当它不应该触发处理程序时。 根据jQuery文档,您无法在实时/委派事件侦听器上停止事件传播。
如何阻止a.toggle的子子项传播到父项? 或者在某些情况下允许它?
你看到.toggle
的内部div应该是一个下拉菜单。 只有当您单击切换链接时,它才会在您单击菜单时切换...
检查此页面中的评论,至少有一些声称找到了解决方法。 http://api.jquery.com/event.stopPropagation/
从线程复制评论以供将来参考:
MikeW:解决.live()事件传播问题。 动态创建的节点在父节点收到之后才会收到该事件。 这将导致funkyness和stopPropagation和preventDefault将无法解决此问题。 要修复:添加行
if(event.target!= this){return true; }
到父节点事件处理程序的顶部。 这将在事件实际发送到子节点时停止触发父事件,并且(与return false不同)将事件传播到目标节点。
另一种方法是仅在事件来自具有.toggle
类(或其子项之一)的元素而不是.toggle_group
元素本身时才执行函数处理程序。
$(".toggle_group").on("click",".toggle",function(e){
if (!$(e.target).is(".toggle")) return;
...
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.