如何阻止儿童传播活动/委托侦听器触发的事件？

我有一个委派父母，监听一组具有特定类的孩子中的点击事件。如何阻止儿童传播活动/委托侦听器触发的事件？

$(".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应该是一个下拉菜单。它不应该当你点击菜单时切换，只有当你点击切换链接时...

来源

2012-02-05 qodeninja

你.off（）对孩子 – frenchie 2012-02-05 22:12:40

所以您选择说与继承的事件侦听器的孩子应该使用过禁用它们做到这一点？ – qodeninja 2012-02-06 00:33:34

是的，这是一种方法。 StopPropagation是另一种方法。还有一种方法是使用on（）为子div创建一个事件监听器，并让它不做任何事情。 – frenchie 2012-02-06 10:13:54

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

复制从线程的评论在这里以供将来参考：

MikeW：工作周围.live（）事件传播的问题。动态地创建节点直到他们的父母有收到它后才会收到该事件。这会造成质朴和停止传播，并且012DepreventDefault不会解决这个问题。修复：添加行

if（event.target！= this）{return true; }

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

来源

2012-02-05 22:10:31

另一种方法是，如果事件来自一个元素与.toggle类（或它的一个子），只执行你的函数处理程序，而不是.toggle_group元素本身。

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

    ... 
});

来源

2012-02-14 16:45:50 andytuba

如何阻止儿童传播活动/委托侦听器触发的事件？

回答

相关问题