javascript：void(0)的作用原理：为何能阻止链接跳转

在编写 HTML 超链接时，开发者经常给 <a> 标签的 href 属性写入 javascript:void(0)。它的核心作用是让超链接具备可点击的鼠标手势与交互外观，但在用户点击后既不打开新网页、不刷新当前页面，也不发生滚动跳顶。之所以能做到这一点，本质在于浏览器对 javascript: 伪协议的特殊求值规则：当伪协议执行结果严格返回 undefined 时，浏览器判定本次脚本执行没有输出新的文档内容，因此主动放弃页面导航与视口重定位。

一、浏览器如何处理 javascript: 伪协议

要彻底搞清楚 javascript:void(0) 的工作原理，必须先将其拆分为两个独立的部分：javascript: 伪协议与 void(0) 表达式。

在 Web 规范中，URL 具有协议头（Scheme）。常见的有传输超文本的 http:、https:，传输文件的 ftp:，唤起邮件客户端的 mailto:，以及执行客户端脚本的 javascript: 伪协议。当用户点击一个指向 javascript:... 的链接，或者在浏览器地址栏直接输入该 URL 时，浏览器并不会发起真实的 HTTP 网络请求，而是将冒号后面的字符串提交给 JavaScript 引擎求值。

求值完成后，浏览器会严格依据返回值类型做出不同的导航决策：

• 返回有效值（非 undefined）：如果表达式计算出了字符串、数字、对象等具体值（例如 href="javascript:'Hello World'" 或 href="javascript:1+1"），浏览器会将该返回值隐式转换为文本，并直接用这段内容替换当前窗口的整个文档流，产生类似新页面载入的破坏性刷新。
• 返回 undefined：如果执行的表达式最终计算出的结果是 undefined，浏览器认为本次执行仅包含纯粹的指令性副作用，无需渲染新文档，因此直接保持当前页面完全不变，静默终止导航流程。

二、深入 void 运算符与操作数 0 的计算

明确了伪协议需要 undefined 才能阻止跳转后，焦点便落在了 void(0) 上。许多初学者误以为 void 是一个函数，圆括号是函数调用。实际上，在 ECMAScript 规范中，void 属于一元运算符（Unary Operator），其优先级与 typeof、delete 等处于同一层级。

1. void 运算符的语言定义

ECMAScript 规范对 void 的定义非常纯粹：无论后面跟的是什么表达式，void Expression 都会先对该表达式进行求值，然后无条件抛弃计算结果，固定返回 undefined。

// void 运算符的行为演示
console.log(void 0);               // undefined
console.log(void (1 + 1));          // undefined
console.log(void "hello");          // undefined
console.log(void function(){});    // undefined

因为 void 是运算符而非函数，括号只是用来界定操作数优先级的可选符号。写法 void 0 与 void(0) 在语义上完全等价，带上圆括号主要是为了避免运算符优先级引起的解析歧义。

2. 为什么操作数普遍选用 0？

既然 void "abc"、void true、void null 返回的都是 undefined，为什么在漫长的前端发展中，大家都约定俗成地写 void(0) 呢？

• 字符最短、最轻量：数字 0 仅占 1 个字节，是所有有效 JavaScript 表达式中书写成本最低的操作数之一。
• 无执行开销与副作用：数字字面量 0 的求值在引擎语法解析阶段瞬间完成，不需要查找作用域链，也不分配复杂内存。
• 避免全局 undefined 被篡改的历史问题：在早期 ECMAScript 3 规范中，全局属性 window.undefined 并不是只读变量，在某些旧版脚本中可以被重新赋值（例如 undefined = true）。而 void 0 作为底层语法关键字，从语言机制上百分之百保证生成纯正的原语 undefined。

三、与常见阻止跳转方案的深度对比

为了让 <a> 标签充当按钮或触发器，开发者们常在 href="#"、href="javascript:void(0)" 和 event.preventDefault() 之间进行选择。在一致的点击交互条件下，不同方案在视口滚动、浏览器历史记录、事件冒泡与传播上有着截然不同的表现：

实现方案	页面是否滚动跳顶	地址栏 Hash 变化	历史记录记录污染	安全机制（CSP）友好度
href="#"	是（立即滚回顶部）	会追加 #	可能产生新的历史记录点	高（纯标准锚点）
href="javascript:void(0)"	否（保持原视口位置）	无任何变动	不污染历史记录	低（易被 CSP 拦截）
event.preventDefault()	否（根据逻辑精准控制）	无变动	无污染	高（完全解耦的脚本逻辑）
语义化 <button>	否（原生无跳转语义）	无变动	无污染	极高（无需 hack）

1. 为何 href="#" 经常导致恶劣的用户体验？

很多初学者喜欢随手写 <a href="#" onclick="doSomething()">。当一个长页面向下滑动了几千像素后，用户点击该链接，页面会瞬间“唰”地一下猛冲回页面最顶部。

这是因为在 HTML 规范中，# 代表页面默认的空锚点。当点击没有具体 id 的 # 时，浏览器的默认行为就是将视口滚动条归零（即滚动到 top: 0）。同时，地址栏末尾被追加了一个 # 字符。而 javascript:void(0) 最大的实际价值，就在于规避了这一极具破坏性的跳顶行为。

四、为什么现代前端不再推崇 javascript:void(0)

尽管 javascript:void(0) 精准达成了“阻止链接跳转”的目的，但在现代 Web 规范与工程体系下，它暴露出了越来越明显的技术缺陷与合规阻碍：

1. 内容安全策略（CSP, Content Security Policy）的拦截

为了防御跨站脚本攻击（XSS），现代生产环境普遍启用了严格的 CSP 策略。在 CSP 规范中，href="javascript:..." 与内联 onclick 属性一样，都被视作不安全的内联脚本（Inline Script Execution）。如果服务器设置了禁止内联脚本的响应头：

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

此时任何 javascript:void(0) 链接在被点击时都会直接触发控制台安全报错（Refused to run the JavaScript URL because it violates the following Content Security Policy directive...），甚至导致页面相关交互彻底瘫痪。

2. 无障碍访问性（A11y, Accessibility）与 SEO 语义缺失

HTML 规范明确界定了元素的职责边界：

• <a> 标签（Anchor）：用于资源导航。当用户激活它时，预期是跳转到另一个 URL 或锚点。搜索引擎蜘蛛追踪 href 建立页面权重与连接；视障人士使用的屏幕阅读器（Screen Reader）读到链接时，会提示用户“这是一个链接”。若用户按下回车键却毫无跳转，会带来巨大的认知障碍。
• <button> 标签：用于触发动作。提交表单、打开弹窗、展开折叠栏、异步请求数据等，属于典型的动作交互，原生支持空格键和回车键触发，并向无障碍辅助设备正确传达“按钮”角色。

五、现代替代方案与重构指南

在日常开发中，面对原本使用 javascript:void(0) 的遗留代码，可以按照以下标准模式进行平滑重构：

方案一：行为操作全面转为原生 <button>

如果该元素点击后只是执行一段 JavaScript 逻辑（如打开对话框、删除某项条目），应直接使用 <button type="button">。若需要保持超链接的无边框扁平外观，通过 CSS 简单清除样式即可：

<!-- HTML 结构 -->
<button type="button" class="link-btn" onclick="openModal()">打开弹窗</button>

<!-- CSS 样式还原链接外观 -->
<style>
  .link-btn {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: #0066cc;
    text-decoration: underline;
    cursor: pointer;
  }
</style>

方案二：需保留真实链接能力的渐进增强模式

如果该链接本质上对应一个真实存在的资源，只是希望在启用 JavaScript 的环境下拦截默认跳转、改用 AJAX 或无刷新加载，应该为 href 提供真实备选 URL，并在事件监听器中使用 event.preventDefault()：

<a href="/article/detail/102" id="detailLink">查看详情</a>

<script>
  document.getElementById('detailLink').addEventListener('click', function(event) {
    // 阻止浏览器按照 href 执行全页跳转
    event.preventDefault();
    
    // 改用无刷新单页应用逻辑或异步加载
    loadDetailWithAjax(102);
  });
</script>

六、全文总结

理解 javascript:void(0) 的作用原理，核心在于把握浏览器底层的两层逻辑：

1. 协议层面：javascript: 伪协议在执行后，会检查表达式的返回值；只有当返回值严格为 undefined 时，浏览器才不进行任何文档替换与导航跳转。
2. 语言层面：一元运算符 void 会在求值操作数（数字 0）后，无条件、安全、极小开销地固定输出基础原语 undefined。

在早期的 Web 页面中，它是阻止页面跳顶与哈希污染的得力工具。但在组件化、重视无障碍交互以及强化内容安全策略（CSP）的今天，应当将动作触发交给原生的 <button>，将页面导航交给拥有合规 href 与 event.preventDefault() 的 <a> 标签，让代码兼具优雅的交互体验与标准的 Web 规范。