javascript：void(0) 与 href="#" 有什么区别

在前端页面开发中，当我们需要用 <a> 标签作为一个可点击的交互控件（例如弹出对话框、切换标签页或触发自定义脚本），而不是跳转到真正的页面地址时，往往会看到两种经典的空链接写法：href="#" 与 href="javascript:void(0)"。虽然两者在视觉上都能呈现出超链接的指针手势，但它们底层的运作机制、对页面滚动位置的影响、对单页应用（SPA）路由的影响以及在内容安全策略（CSP）下的表现截然不同。

一、核心机制与本质差异

要理解两者的区别，首先需要厘清浏览器对这两种不同 href 属性值的处理方式：

• href="#" 的本质是锚点定位机制：# 符号在 URI 规范中被称为片段标识符（Fragment Identifier）。浏览器解析到 # 时，会尝试在当前页面中查找 id 为该名称的 DOM 节点。如果 # 后面未指定任何标识符，浏览器的默认行为是将页面滚动条立即重置并滚动到视口顶部，同时在浏览器地址栏的 URL 末尾追加 #，并在浏览器的前进/后退历史栈中压入一条新记录。
• href="javascript:void(0)" 的本质是伪协议求值：javascript: 是一种内联脚本伪协议。当链接被点击时，浏览器 JavaScript 引擎会计算后面的表达式。在 JavaScript 语言规范中，void 是一个单目运算符，它会计算其后的表达式并无条件返回 undefined。根据浏览器的导航规则，当 javascript: 伪协议的执行结果为 undefined 时，浏览器不会进行任何页面刷新、跳转或滚动，完全保持当前页面状态不变。

图 1：javascript:void(0) 与 href="#" 核心特性全景对比

二、浏览器执行生命周期与事件处理剖析

为了直观展现两者在点击触发时的实际执行细节，我们可以跟踪浏览器事件触发与导航生命周期的处理链路。

当用户在网页上点击一个超链接节点时，浏览器首先会派发标准 DOM 事件（捕获阶段与冒泡阶段）。在此期间，如果开发者绑定的 onclick 处理函数没有显式调用 event.preventDefault() 或返回 false，浏览器就会继续执行 href 属性定义的默认行为：

1. href="#" 的链路分支：浏览器解析到空锚点，触发 hashchange 事件与 popstate 事件，并计算页面滚动偏移量将视口平滑或瞬间置顶（滚动到 pageYOffset = 0）。这一过程导致用户在长页面中间点击操作时，视口突然跳转回顶部，造成极差的交互体验。
2. href="javascript:void(0)" 的链路分支：浏览器识别到 javascript: 协议处理器，临时构建执行上下文运行代码 void(0)。因为运算结果为 undefined，浏览器终止当前导航过程，不派发 hashchange 事件，保留当前视口位置。

图 2：浏览器针对不同 href 值的事件分发与导航处理流程

三、实际开发中的潜在隐患与副作用

在企业级开发和大型项目中，滥用 href="#" 或 href="javascript:void(0)" 会带来一系列不容忽视的问题：

1. 单页应用（SPA）中的路由冲突

在使用 Vue Router、React Router 等前端路由库且配置为 hash 模式（即 URL 形式为 https://example.com/#/dashboard）时，点击 <a href="#"> 会把当前的 Hash 地址直接重置为 #。这会导致单页应用的路由守卫被意外触发，页面被强制重定向到首页或匹配不到路由而白屏。

2. 内容安全策略（CSP）拦截问题

现代 Web 安全非常强调防御跨站脚本攻击（XSS）。网站通常会通过 HTTP 响应头配置严格的 CSP（Content Security Policy），例如：

Content-Security-Policy: default-src 'self'; script-src 'self';

在没有声明 'unsafe-inline' 的 CSP 策略下，浏览器会将 href="javascript:void(0)" 视同为内联脚本执行，并在控制台中直接抛出 CSP 拦截错误，导致链接无法正常执行任何关联动作。

3. 页面无障碍（Accessibility, a11y）与屏幕阅读器困扰

根据 W3C WAI-ARIA 规范，<a> 标签的语义代表“资源链接”，视障用户使用屏幕阅读器浏览页面时，朗读器会提示“链接：javascript:void(0)”。用户自然会预期点击后进入新页面或跳转到对应部分。如果它实际上是一个弹出模态框或展开菜单的动作，这种语义割裂会导致视障用户产生严重困扰。

四、现代前端的规范重构与最佳实践

针对过去项目中大量存在的 href="#" 与 javascript:void(0)，我们可以按照清晰的路径逐步进行重构与迁移：

图 3：从旧式空链接迁移至现代规范标准的四阶段重构步骤

标准重构代码示例

针对传统写法与现代写法的对比，具体代码实现如下：

反模式（传统老旧写法）：

<!-- 问题：长页面中点击会瞬间滑回顶部，且改变 URL -->
<a href="#" onclick="openModal()">打开弹窗</a>

<!-- 问题：违背 CSP 安全规范，且缺乏语义化支持 -->
<a href="javascript:void(0)" onclick="openModal()">打开弹窗</a>

推荐方案 1：语义化 Button 元素（最佳实践）

<!-- HTML 部分：语义清晰，自带无障碍焦点导航 -->
<button type="button" class="link-btn" onclick="openModal()">打开弹窗</button>

<!-- CSS 部分：复原为纯文本链接外观 -->
<style>
  .link-btn {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: #2563eb;
    text-decoration: underline;
    cursor: pointer;
  }
  .link-btn:hover {
    color: #1d4ed8;
  }
</style>

推荐方案 2：历史遗留项目过渡方案（显式阻止默认事件）

如果出于组件库封装限制，暂时必须保留 <a> 标签，则必须通过 event.preventDefault() 精确阻断默认的锚点导航逻辑：

<a href="#" onclick="handleAction(event)" role="button">操作链接</a>

<script>
function handleAction(event) {
  // 关键：明确拦截 href="#" 的默认锚点置顶与 Hash 变更
  event.preventDefault();
  
  // 执行具体的业务逻辑
  console.log("执行业务逻辑，页面不会产生任何多余滚动或 URL 变化");
}
</script>

五、综合场景选型决策矩阵与总结

为了帮助开发者在实际开发与代码评审中快速做出恰当的技术选型，以下给出针对不同场景的决策总结树：

图 4：交互元素选型与场景决策矩阵

综上所述，javascript:void(0) 和 href="#" 的根本区别在于：前者通过执行空返回的脚本阻断了浏览器的任何页面动作，代价是引入内联脚本与安全合规隐患；后者则是纯粹的锚点导航机制，代价是会引起页面跳顶、URL 污染及路由冲突。而在现代 Web 标准下，两者的最佳替代方案均是回归 HTML 语义化本质——使用 <button type="button"> 并结合 CSS 样式重置，从而在保障交互效果的同时，获得最佳的无障碍体验与系统健壮性。