1

有什么方法可以防止点击<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从的 click 处理程序返回<a>将阻止其他处理程序运行，但也会执行 a .preventDefault()，因此浏览器将无法导航。基本上，我想知道return false;那e.stopImmediatePropagation(); e.preventDefault();不是什么。根据文档，它们应该是等效的。

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

4

1 回答 1

4

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

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

这是带有此更改的演示的工作版本

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

这通常不是不同级别的问题，但由于是在同一个元素.delegate()上收听，所以这很重要。

于 2010-07-01T19:49:43.650 回答