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

一、核心机制：浏览器如何处理 javascript: 伪协议

要彻底搞清楚 void(0) 为何能阻止链接跳转，必须把目光拆解为两半：第一半是浏览器的 javascript: 伪协议规则，第二半才是 JavaScript 语言层面的 void 运算符。

当一个 HTML 超链接的 href 属性以 http://、https:// 或相对路径开头时，点击链接会通知浏览器网络层发起资源请求并切换视图。但如果 href 属性以 javascript: 开头，浏览器就会将其识别为伪协议（Pseudo-protocol）。此时，浏览器不会启动网络请求，而是将冒号后面的字符串提交给 JavaScript 引擎求值执行。

关键的转折点在于引擎执行后的返回值处理逻辑：

• 返回有具体值（非 undefined）：浏览器会调用该值的内部转换机制，将其序列化为字符串，并把当前标签页的文档流清空，以该字符串作为新的 HTML 页面呈现。
• 返回值为 undefined：浏览器认定该脚本仅用于执行副作用（如调用某个函数或不产生新页面），因此不会创建新文档，也不会触发页面刷新或滚动，页面完整保持原状。

<!-- 示例 1：表达式返回字符串，当前页面将被直接覆盖为 "Hello World" -->
<a href="javascript:'Hello World'">点击后整页被替换为字符串</a>

<!-- 示例 2：表达式返回数字，页面将被覆盖为 "123" -->
<a href="javascript:123">点击后整页被替换为数字</a>

<!-- 示例 3：表达式求值为 undefined，页面不产生任何变动 -->
<a href="javascript:void(0)">安全点击，不发生任何跳转</a>

二、关键字拆解：void 运算符在 JavaScript 中的本质

明确了浏览器的伪协议规则后，接下来的疑问是：为什么一定是 void(0)？在 JavaScript 中，void 到底是什么？

1. void 是一元运算符，而非内置函数

许多初学者会因为 void(0) 带有圆括号而误认为 void 是一个全局函数。其实不然，在 ECMAScript 规范中，void 与 typeof、delete 一样，属于一元运算符（Unary Operator）。

其标准语法形式为：

void expression

运算符的行为十分简单明确：先对给定的表达式求值，然后丢弃其计算结果，并固定返回原始值 undefined。因此，无论在后面塞入什么表达式，最终结果都只能是 undefined：

console.log(void "hello");      // 输出: undefined
console.log(void (1 + 2));      // 输出: undefined
console.log(void alert("hi"));  // 弹出提示框，随后输出: undefined
console.log(void 0);            // 输出: undefined
console.log(void(0));           // 输出: undefined（圆括号仅用于分组）

2. 为什么开发者偏爱使用 0？

既然 void 后面放任何东西都能返回 undefined，为什么行业约定俗成写的是 0？原因主要有三点：

1. 字符最短：在 HTML 属性中，0 仅占 1 个字符，代码量最小。
2. 求值开销最小：数字字面量 0 是基元常量，JS 引擎对其求值无需任何额外计算或寻址，执行消耗无限趋近于零。
3. 无副作用：像 void(fn()) 会执行函数并带来副作用，而 void(0) 绝对纯净无害。

3. 历史背景：为什么不直接写 javascript:undefined？

一个很自然的问题是：既然目标就是得到 undefined，为什么不直接写 javascript:undefined 呢？

这涉及到早期 JavaScript 规范的历史遗留设计。在 ECMAScript 5 之前，全局属性 undefined 并不是只读的，而是属于 window 对象上的可写属性！如果在代码中有恶意脚本或者疏忽声明了 var undefined = true;，那么全局的 undefined 就会被篡改。

相比之下，void 是 JavaScript 的保留关键字，语法层面无法被任何作用域重写或重新赋值。因此在过去漫长的浏览器碎片化时代，使用 void 0 获取纯正、不可篡改的 undefined 是最稳妥的防御性编程手段。

三、常见空链接方案的横向对比与缺陷分析

为了让 <a> 标签保留鼠标悬浮的小手指针（pointer）及默认样式，开发者在实际项目中尝试过多种阻止默认跳转的方式。我们逐一分析其底层表现：

1. 为什么坚决不要用 href="#"

在早期的 HTML 规范中，单个 # 代表指向文档顶部的空片段标识符（Empty Fragment）。一旦用户在页面中下部点击带有 href="#" 的链接，浏览器的视口会骤然拉回到页面最顶端，不仅打断用户的阅读节奏，还会向浏览器的历史导航堆栈中追加一个无效的哈希项。

2. 为什么现代规范逐步淘汰 javascript:void(0)

尽管 javascript:void(0) 解决了跳顶和刷新的问题，但在现代 Web 工程中，它暴露出三个致命缺陷：

• 内容安全策略（CSP，Content Security Policy）冲突：为了杜绝跨站脚本攻击（XSS），现代网站通常会配置 script-src 'self'，严禁执行内联脚本与伪协议。此时点击 javascript:void(0) 会直接在浏览器控制台报错并被拦截。
• 破坏可访问性（Accessibility，a11y）：读屏软件（Screen Reader）会将 <a> 宣布为“链接”，但用户使用键盘激活或试图右键复制链接地址时，获取到的却是一串毫无意义的代码。
• 搜索引擎优化（SEO）负面影响：网络爬虫顺着 javascript:void(0) 无法获取任何有效的结构化路由，造成死链警告或权重损耗。

四、现代 Web 开发中的演进与替代实践

了解了 javascript:void(0) 的工作原理后，我们不仅要知其然，更要在现代项目实践中采用更规范、更健壮的编码策略。

1. 语义化原则：页面内操作一律优先使用 <button type="button">

如果一个 UI 元素的本质是“打开弹窗”、“展开折叠板”、“切换深色模式”或“删除列表项”，它根本不是“超链接”，而是一个标准的“按钮”。

如果担心 <button> 带有浏览器默认的边框和背景，只需通过简易 CSS 予以重置即可获得与链接完全一致的外观，同时收获原生的空格键与回车键支持：

/* 将按钮重置为类似文字链接的样式 */
.link-button {
  background: transparent;
  border: none;
  padding: 0;
  color: #456581;
  text-decoration: underline;
  cursor: pointer;
  font: inherit;
}

2. 真实超链接的渐进增强：通过 event.preventDefault() 拦截

如果该元素本身确实指向一个落地资源页面（例如商品详情页），但在桌面端希望通过单页无刷新弹窗展示，此时最佳实践是提供有效的备用链接，并用 JavaScript 监听点击事件并显式调用 event.preventDefault()：

<!-- HTML：保留有效落地页 URL，照顾无 JS 环境及搜索引擎爬虫 -->
<a href="/goods/detail/10086" id="goodsItem">查看商品明细</a>

<script>
const link = document.getElementById("goodsItem");
link.addEventListener("click", (event) => {
  // 显式取消默认导航动作
  event.preventDefault();
  
  // 执行单页应用内部弹窗或数据加载
  openDetailModal(10086);
});
</script>

这种模式被称为渐进增强（Progressive Enhancement）：普通点击会在当前页弹窗并阻止跳转；而用户按住 Ctrl/Cmd 键右键点击“在新标签页打开”时，仍能正确导航到目标 URL，兼顾了体验与鲁棒性。

五、知识要点速查卡片与常见疑难排查