javascript - 在 anchor 元素上实现 onclick，同时省略 href

Question

我已经看到实现 onclick上a元素以不同的方式，但我不知道事件中每个元素与另一个元素有何不同？

当我点击a时我想要什么我想要onclick event没有 href 就会发生什么都不做。

<a href="#" onclick="myFunc()">Submit</a>
<a href="javascript:void(0);" onclick="myFunc()">Submit</a>
<a href="javascript:;" onclick="myFunc()">Submit</a>
哪一种适合我的情况？

Answer 1

在当今的 JS 开发中，这些示例都不是真正合适的，因为内联 JavaScript 几乎不受欢迎 - HTML/JS 分离是最好的途径。

因此，在从 HTML 页面调用的单独 JS 文件中(将 <script> 放在 </body> 之前，以确保 DOM 在执行脚本之前加载)，获取 anchor ，并为每个 anchor 添加一个事件监听器调用相应的函数。

let anchors = document.querySelectorAll('a');
[...anchors].forEach(anchor => anchor.addEventListener('click', handleAnchor, false));

然后在您的函数中，确保传入事件，并调用 preventDefault()停止禁用 href。

function handleAnchor(e) {
  e.preventDefault();
  ...
}

MDN 资源

• querySelectorAll
• forEach