如何仅针对单击的图层触发单击事件，而不为其父层触发单击事件

How to trigger click event only for the clicked-on layer and not its parent too

本文关键字：单击 事件 图层 何仅针      更新时间：2023-09-26

小提琴

我当然可以从.main层中取出.inner层然后对另一个包装器使用绝对位置，即.outer层将其放置在相同的位置，这将阻止它触发.main单击事件。但我想知道是否有更简单的方法可以避免两个点击事件都触发，如果两个孩子都触发元素和父级触发单击事件。

您可以使用stopPropagation() 

$(document).ready(function() {
    $('.outer').on("click",".main",function() { alert('main clicked'); })
    $('.outer').on("click",".inner",function(e) {e.stopPropagation(); alert('inner clicked'); })
});

http://jsfiddle.net/5xvkM/6/

使用 stopPropagation() .即使两者都是委托事件，jQuery 也会首先对它们进行最深入的评估。因为最内层有stopPropagation()，顺序中较高的事件不会被执行。

$('.outer').on("click", ".inner", function(event) {
    event.stopPropagation();
    alert('inner clicked');
});

但您必须注意直接处理程序和委托处理程序之间的执行顺序。由于事件需要冒泡才能到达委托的处理程序，因此首先触发直接处理程序。当直接处理程序混合在一起时，使用委托处理程序停止传播将毫无用处。

相关文章：