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 回答