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

Question

有什么方法可以防止来自<a> 的点击触发其父级上的委托点击处理程序，同时允许<a> 的默认行为发生（导航到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") 或类似的

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

从<a> 的单击处理程序返回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");
});

Here's a working version of your demo with this change

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

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