逐步增强锚标签以避免onclick =“return false;”

Question

不引人注目的JS表明我们的HTML模板中没有任何onclick属性。

<a href="/controller/foo/1">View Foo 1</a>

基本的渐进增强是将该锚标记转换为使用XHR来检索DOM片段。所以，我编写JS来为a。“click”添加一个事件监听器，然后将一个XHR添加到a.href。

唉，浏览器仍想导航到“/ controller / foo”。所以，我写JS来动态注入a.onclick =“return false;”。仍然不引人注目（我猜），但现在我付出了额外事件处理程序的成本。

为了避免2个事件监听器的成本，我可以将我的函数调用推入onclick属性

<a href="/controller/foo/1" onclick="myXHRFcn(); return false;">

但是出于各种原因，这是格罗多。

为了使它更有趣，我可能有100个我想要增强的锚标签。更好的模式是父节点上依赖于事件冒泡的单个侦听器。这很酷，但是如何在每个锚节点上将浏览器从导航到URL而没有这个短路？

onclick="return false;"

操作href不是一种选择。它必须保持原样，以便在新页面中复制或打开的上下文菜单选项按预期工作。

Answer 1

event.stopPropagation()可能就是您要找的内容（在您检查event.target的冒泡点击的事件处理程序内部）