有什么方法可以防止点击<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")
在我离开的路上一定不能看到。
解决方案有一些限制:
- 所有的事件处理程序都必须被委派出去
$(".top")
,因为我可能在页面中有数千个这样的处理程序。 - 导航必须使用浏览器默认行为完成,而不是
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/