禁用 a 标签的跳转和定位

问题

如何禁用 a 标签的页面跳转或锚点定位功能？

解答

方法一：修改 href 属性

将 href 指向空或不返回任何内容：

<a href="javascript:void(0);">点击无反应</a>

方法二：阻止默认事件

在 HTML 中直接返回 false：

<a href="" onclick="return false;">return false</a>
<a href="#" onclick="return false;">return false</a>

在 JavaScript 中阻止默认行为：

document.querySelector('a').addEventListener('click', function(event) {
  event.preventDefault();
});

方法三：使用 CSS 禁用交互

通过 CSS 禁用所有鼠标事件：

a {
  pointer-events: none;
}

关键点

• javascript:void(0) 是最常用的方式，不会改变页面 URL
• event.preventDefault() 适合需要保留其他点击逻辑的场景
• pointer-events: none 会禁用所有鼠标交互，包括 hover 效果
• return false 在内联事件中可以同时阻止默认行为和事件冒泡
• 使用 href="#" 会导致页面滚动到顶部，需配合 return false 使用