javascript - 如何仅针对单击的图层而不是其父图层触发单击事件

Question

小提琴

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

Answer 1

您可以使用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/

Answer 2

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

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

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