如何在不阻止 jQuery 中默认值的情况下阻止父级上的委托处理程序？

Question

有什么方法可以防止 的点击触发其父级上的委托点击处理程序，同时允许发生 的默认行为（导航至 href）。

这是一个例子，说明了我的要求。

<div class="top">
    <div class="middle">
        <a href="google.com" class="link">link</a>
    </div>
</div>

还有我的 JavaScript：

$(".top").delegate(".middle", "click", function(event) {
   alert("failure");
});

$(".top").delegate(".link", "click", function(event) {
   // ???
});

在本例中，我希望在点击链接时导航到 google.com，但在退出时不能看到 alert("failure")。

该解决方案有一些限制：

1. 所有事件处理程序都必须从 $(".top") 委托，因为我的页面中可能有数千个这样的事件处理程序。
2. 导航必须使用浏览器默认行为来完成，而不是 window.location = $(this).attr("href") 或类似的

使用正常的事件绑定，我可以执行 e. stopPropagation() 在 的点击处理程序中，但由于委托的性质，这不起作用。 jQuery 提供了另一种名为 .stopImmediatePropagation() 的方法，它描述了我想要的内容（防止当前元素上的其他处理程序，在本例中为保存委托处理程序的元素），但在这种情况下实际上并没有完成它。我不确定这可能是 .delegate() 中的错误。

从 的点击处理程序返回 false 将阻止其他处理程序运行，但也会执行 .preventDefault() ，因此浏览器将不会导航。基本上，我想知道 return false; 是做什么的 e.stopImmediatePropagation(); e.preventDefault(); 不会。根据文档，它们应该是等效的。

对于上述代码的现场演示，这里有一个 JSFiddle： https://jsfiddle.net/CHn8x/

Answer 1

event.stopImmediatePropagation() 确实是您所追求的，但请记住，这里的顺序很重要，因为 .delegate() 监听相同级别，因此您需要反转绑定，如下所示：

$(".top").delegate(".link", "click", function(event) {
  event.stopImmediatePropagation();
});
$(".top").delegate(".middle", "click", function(event) {
  if(!event.isPropagationStopped())
    alert("failure");
});

这是经过此更改的演示的工作版本

您绑定处理程序的顺序就是它们执行的顺序，因此您需要 .link 处理程序在其他处理程序运行之前执行并停止传播，使用 event.isPropagationStopped() 或 event.isImmediatePropagationStopped()。

这通常在不同级别上不是问题，但由于 .delegate () 正在侦听相同的元素，这确实很重要。