如何为每个 <a> 添加一个自引用的 onclick 事件？答案

【问题标题】：How can I add a self-referring onclick event to every <a>?如何为每个 <a> 添加一个自引用的 onclick 事件？
【发布时间】：2021-04-09 14:06:36
【问题描述】：

我有一个单页应用程序，我想确保不会以常规方式处理链接点击，而是将其传递给我的路由器。因此，我拥有当前完美运行的菜单代码（goto 更改 HTML 并返回 false）：

<a class="nav-link" href="/framework" onclick="return goto(this);">Home</a>
<a class="nav-link" href="/framework/register" onclick="return goto(this);">Register</a>
<a class="nav-link" href="/framework/login" onclick="return goto(this);">Log In</a>

由于每个链接都获得相同的onclick 属性，有什么方法可以将我的链接写成

<a class="nav-link" href="/framework">Home</a>
<a class="nav-link" href="/framework/register">Register</a>
<a class="nav-link" href="/framework/login">Log In</a>

就像我在非 SPA 网站上一样，并在全球范围内应用 onclick 事件？

【问题讨论】：

我之前的陈述是错误的，$('a').onclick('return goto(this);'); 确实有效，所以这是一个非常愚蠢的问题，道歉！

标签： javascript html jquery onclick href

【解决方案1】：

你可以附加一个点击事件监听器。

$('a').click(function(e){
   goto(this);
   e.preventDefault();//don't navigate away
   /*we can't use return goto(this) because returning false in a jQuery event handler 
      also stops event propagation */
});

如果你的锚元素是动态的，你可以使用事件委托。

$(document).on('click', 'a', function(e){
   goto(this);
   e.preventDefault();//don't navigate away
});

【讨论】：

“我们不能使用 return goto(this) 因为在 jQuery 事件处理程序中返回 false 也会停止事件传播”是什么意思？这很有趣，我不知道这会产生任何问题。
@user1111929 return false 在 jQuery 事件处理程序中等价于 e.preventDefault(); e.stopPropagation();
@user1111929 另见：stackoverflow.com/questions/5927689/…
这真的很有趣，而且我在提交表单时也做错了，所以这对我很有价值。谢谢！

【解决方案2】：

也许是这个？

element.addEventListener('click', function(e) {
  e.preventDefault()

  // Do your things
})

【讨论】：

e 不是 Event Binder - 它是 addEventListener 方法提供的 Object 参数。它没有绑定到任何东西。