Javascript 如何仅为单击的层而不是其父层触发单击事件

我当然可以从

.main

层中取出

.internal

层 然后对另一个包装使用绝对位置，即

.outer

层 将其放置在相同位置，这将阻止其触发

。main

单击事件。 但我想知道是否有一种更简单的方法可以避免两个点击事件都触发，如果两个孩子

---

元素和父元素触发单击事件。

您可以使用

stopPropagation（）

。即使这两个事件都是委托事件，jQuery也会首先对它们进行评估。由于最里面的有

stopPropagation（）

，因此不会执行顺序较高的事件

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

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

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