javascript：void(0) 在 HTML 链接中有什么作用

在 HTML 的 <a> 标签中，设置 href="javascript:void(0)" 的核心作用是阻止超链接触发任何默认页面跳转或视口重载，同时完整保留超链接原有的样式、键盘可聚焦性以及手势光标形态。这样一来，开发者便可以在保留“链接外观”的前提下，将点击事件完全交给 JavaScript 的 onclick 处理函数去控制。

一、为什么需要阻止链接的默认导航

HTML 中的 <a> 元素天生承载着超文本跳转任务。一旦用户点击该元素，浏览器默认会解析 href 中的路径并执行跳转。如果省略 href 属性，浏览器通常不会为其赋予可点击的指示光标（默认鼠标指针形态），且该元素在默认情况下无法响应键盘 Tab 键聚焦。

在早期的前端开发中，大量交互（如弹出模态窗口、触发异步加载、展开菜单）被设计在 <a> 标签上。为了既享受超链接自带的默认样式与交互习惯，又防止浏览器真的去刷新页面或跳转至新 URL，开发者引入了伪协议结合运算符的方案，即 javascript:void(0)。

二、底层语法原理拆解：伪协议与 void 运算符

这个表达式由两部分组合而成，每一部分都有严格的规范定义：

1. javascript: 伪协议（Pseudo-protocol）

在 URI 规范中，javascript: 类似于 http:、https: 或 mailto:，它告诉浏览器紧随其后的字符串应当作为一段 JavaScript 脚本代码在当前窗口上下文中执行，而不是作为一个网络资源地址去发起获取请求。

2. void 运算符与返回值规则

void 是 JavaScript 语言中的一个原生一元运算符。其语法规则为：

void expression
void(expression)

无论紧跟在 void 后面的表达式计算出什么值（数值、字符串、对象等），void 运算符都会在完成计算后丢弃该计算结果，并始终返回 undefined。

根据浏览器对 javascript: 伪协议的处理规范：

• 如果脚本执行后返回一个非 undefined 的具体值（例如字符串），浏览器会清空当前页面，将该返回值当作新的 HTML 内容渲染出来。例如，若链接为 href="javascript:'Hello'"，点击后整个页面会被替换为文本 "Hello"。
• 如果脚本执行后返回值为 undefined，浏览器便会认为该脚本无需输出页面，从而不做任何文档替换动作。

因此，void(0) 就是一个计算速度极快、无任何副作用、并且明确返回 undefined 的标准代码写法。括号中的 0 只是作为一元运算符的最小操作数，写成 void 0 或 void('test') 效果完全等价，但 void(0) 最为短小惯用。

三、常见空链接实现方案对比分析

在日常开发中，除了 javascript:void(0)，经常还会见到 href="#" 或 href="javascript:;"。开发者往往因不了解背后的副作用而选错方案。

实现写法	URL 变化	页面滚动表现	浏览器历史记录	适用与建议
href="#"	末尾添加 # 锚点	立刻向上滚动回页面顶部	新增一条历史记录	不推荐。除非页面有锚点需求，否则会造成意外滚动。
href="javascript:void(0)"	无任何变动	绝对保持当前位置不变	不产生新记录	老旧系统兼容、过渡代码；受严格 CSP 限制。
href="javascript:;"	无任何变动	绝对保持当前位置不变	不产生新记录	简写等价物，空语句解析为 undefined。
<button type="button">	完全无 URL 关联	保持当前位置	无影响	强烈推荐。符合 Web 语义化和可访问性要求。

四、实际代码使用与事件分发链路

在经典项目中，javascript:void(0) 通常与内联 onclick 属性或外部事件监听器配合使用。以下是一个完整的示例：

<!-- 示例 1：内联绑定与 void(0) 配合 -->
<a href="javascript:void(0)" onclick="openUserModal(1024);">查看用户详情</a>

<!-- 示例 2：纯粹依赖 JS 监听 -->
<a href="javascript:void(0)" id="exportBtn">导出报表</a>

<script>
  document.getElementById('exportBtn').addEventListener('click', function(event) {
    // 处理报表导出逻辑
    console.log('正在生成导出文件...');
  });
</script>

当用户点击该链接时，浏览器在底层会依次经历以下五个阶段的处理流程：

五、现代前端开发的局限性与推荐替代方案

虽然 javascript:void(0) 能够出色地实现“不跳转且不滚屏”，但在现代 Web 标准及工程规范下，它存在几个显著的设计缺陷：

1. 内容安全策略（CSP，Content Security Policy）阻断：现代 Web 应用普遍开启了严格的 CSP 头（如 script-src 'self'）。在此安全策略下，所有 javascript: 伪协议链接都会被视作内联脚本而直接被浏览器拦截并报错。
2. 破坏语义化与可访问性（Accessibility / a11y）：屏幕阅读器在朗读 <a> 标签时会提示用户这是一个“链接”。视障用户会期待其导航到一个新页面或锚点，但按下回车后却发现并不发生跳转，破坏了正常的辅助设备预期。
3. 破坏链接上下文菜单：当用户右键该链接选择“在新标签页打开”或“复制链接地址”时，得到的将是一个毫无意义的 javascript:void(0)，严重破坏用户的操作直觉。

最佳实践代码示例

1. 界面操作类：改用原生 Button 并搭配样式还原链接外观

对于触发弹窗、切换折叠面板等纯交互行为，最佳方式是使用按钮。可以通过 CSS 去除按钮默认边框与背景，使其视觉上与超链接完全一致：

<!-- HTML -->
<button type="button" class="link-style-btn" onclick="openProfile();">个人资料</button>

<!-- 对应的 CSS -->
<style>
  .link-style-btn {
    background: none;
    border: none;
    padding: 0;
    color: #345E82;
    text-decoration: underline;
    cursor: pointer;
    font-size: inherit;
    font-family: inherit;
  }
</style>

2. 单页应用与页面跳转类：使用真实 href 配合 preventDefault()

如果该元素本质上依然是指向某个页面模块，应填入真实目标地址，并在脚本中使用 preventDefault() 拦截：

<a href="/article/128" id="articleLink">阅读全文</a>

<script>
  document.getElementById('articleLink').addEventListener('click', function(event) {
    // 阻止浏览器发起全页重载
    event.preventDefault();

    // 改为通过前端路由（如 Vue Router / React Router）进行无刷新局部切换
    router.push('/article/128');
  });
</script>

六、核心要点总结