如何在不阻止 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")或类似

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

false从的单击处理程序返回<a>将阻止其他处理程序运行，但也会执行.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()元素上监听，因此它确实很重要。