javascript：void(0)、# 和 event.preventDefault() 有什么区别？

在日常 Web 开发中，当开发者希望把一个超链接（<a> 标签）用作纯点击按钮、弹窗触发器或异步操作入口时，最常遇到的问题就是：点击它会触发浏览器默认的页面跳转或页面滚顶行为。为了阻止这种默认行为，前端历史上出现了三种常见方案：href="javascript:void(0)"、href="#" 以及在事件监听函数中调用 event.preventDefault()。它们在底层触发阶段、历史背景、对浏览器地址栏与可访问性的影响上存在本质差别。

简单而言：href="#" 会改变 URL 哈希并将视口滚到页面顶端；javascript:void(0) 是利用伪协议求值并返回未定义来强行阻断导航，但违背了结构与行为分离的规范；而 event.preventDefault() 则是现代标准 DOM 事件流中明确用于取消节点默认动作的方法。如果不需要超链接的语义，最好的方案通常是直接使用 <button>。

三种方案的工作层级与原理解析

要搞清三者的区别，首先需要观察用户在网页上点击一个超链接时，浏览器内部究竟经历了哪些阶段。当点击事件发生时，事件首先沿着 DOM 树经历捕获与冒泡过程。在这个过程中，绑定的 JavaScript 事件处理函数被依次调用。只有在事件冒泡完成且未被标记为取消时，浏览器才会启动 HTML 元素的原生默认操作（即解析 href 属性并执行跳转导航）。

图 1：超链接点击事件响应生命周期与三种阻断方案的介入层级

1. 锚点跳转：href="#" 的行为与副作用

在 HTML 规范中，href="#" 最初被设计为页面内书签（锚点）定位工具。当 href 以 # 开头时，浏览器会去当前页面中寻找 id 或 name 与该片段标识符匹配的元素，并将该元素滚动至视口顶部。

当开发者仅仅写一个单独的 # 而后面没有具体 ID 时，HTML 规范要求浏览器默认将文档顶部作为目标。因此，使用 href="#" 制作无跳转交互时，最典型的副作用就是页面瞬间跳回最上方。此外，点击后浏览器的地址栏尾部会被追加 # 字符，污染浏览历史记录，导致用户点击浏览器的“后退”按钮时无法回到真正的上一页，而是停留在当前页面的不同哈希状态。

<!-- 常见不良写法：点击后滚动条会猛烈向上跳到页面顶端 -->
<a href="#" onclick="openModal()">打开弹窗</a>

2. 伪协议求值：javascript:void(0) 是如何运作的

javascript: 是一种浏览器伪协议（类似 mailto: 或 tel:）。当浏览器导航到以 javascript: 开头的 URI 时，它会调用 JS 引擎执行冒号后面的代码，并获取该代码的返回值：

• 如果返回值是一个字符串，浏览器会把当前文档的内容整体替换为这个字符串（例如早期的 javascript:'<h1>Hello</h1>' 书签脚本）。
• 如果返回值是 undefined，浏览器就会保留当前文档，不做任何内容替换或页面跳转。

JavaScript 中的 void 运算符正是专门用来对后面的表达式进行求值，并始终强制返回 undefined 的。因此，void(0)、void 0 的求值结果就是纯粹的 undefined。浏览器解析完该 URL 发现结果是未定义，于是完全不进行任何重载与视口滚动，同时也不会改变地址栏的 URL。

<!-- 传统做法：阻断跳转且不改变视口位置，但将 JS 代码混入 HTML 属性 -->
<a href="javascript:void(0)" onclick="openModal()">打开操作面板</a>

尽管 javascript:void(0) 解决了 # 的跳顶问题，但它带来了新的缺陷：在现代内容安全策略（CSP, Content Security Policy）严格限制内联脚本执行的环境下，javascript: 伪协议会直接被浏览器拦截并报错；此外在部分老旧浏览器或特定运行环境下，它可能会干扰正在运行的动效或导致鼠标光标状态异常。

3. DOM 标准控制：event.preventDefault()

现代 Web 标准强调“结构（HTML）与行为（JavaScript）分离”。当开发者为元素绑定点击事件监听器时，事件处理函数会接收一个标准的 Event 对象。调用 event.preventDefault() 会将事件内部的 defaultPrevented 标志置为 true，通知浏览器不要执行该事件原本挂钩的默认操作。

<a href="/details/1024" id="detail-link">查看详情</a>

<script>
  const link = document.getElementById('detail-link');
  link.addEventListener('click', function(event) {
    // 阻止浏览器按照 href 进行页面整体跳转
    event.preventDefault();
    
    // 改为使用无刷新的单页路由或异步请求
    loadDetailWithAjax('/details/1024');
  });
</script>

使用 event.preventDefault() 的核心优势在于它支持渐进增强和平稳退化。在上面的示例中，href 依然保留了一个真实合法的 URL 地址。当用户右键点击“在新标签页中打开”、搜索引擎爬虫索引页面、或者用户的浏览器由于脚本报错未执行 JS 时，链接依然能够正常工作；而一旦脚本加载成功，event.preventDefault() 就能接管交互，实现无刷新的流畅体验。

图 2：在现代工程中处理交互与拦截默认动作的标准规范步骤

4. 核心维度全景对比

为了直观评估三种方式的技术特性，我们从浏览器行为、历史影响、CSP 策略及可访问性（Accessibility）进行横向对比：

图 3：三种方案在实际业务场景中的技术特性对比分析

5. 最佳实践与选型决策指南

在了解了各自的底层差异后，开发者在编写组件或页面交互时应当如何做决定？我们可以遵循清晰的场景决策原则：

1. 如果行为纯粹是按钮（无需跳转且无真实 URL）：
   坚决不要使用 <a> 标签，而是使用 <button type="button">。超链接是用来实现网络资源定位和页面导航的，屏幕阅读器等辅助技术会将 <a> 播报为“链接”，用户预期它能跳转。如果它仅用于关闭窗口、展开折叠或提交数据，应使用 <button>，并配合 CSS 消除默认样式。
2. 如果是具备实际路径的超链接，但在前端需要单页路由拦截或前置校验：
   在 HTML 中填写真实的相对或绝对路径，在 JS 中添加 click 事件监听器并调用 event.preventDefault()。这样既保证了链接可右键复制、可被爬虫抓取，又能提供丝滑的单页应用体验。
3. 如果维护老旧项目且暂时无法重构事件绑定：
   使用 javascript:void(0) 比直接写 href="#" 要好得多，至少能避免滚顶造成的不良用户体验。

图 4：现代 Web 标准体系下的元素选择与行为拦截决策路径