javascript：void(0) 和 javascript：；哪个更好

假设你正在维护一段遗留项目的前端页面，页面中有多个作为按钮使用的超链接元素。为了阻止点击链接后页面自动跳回顶部或刷新，代码里有人写了 href="javascript:void(0)"，也有人写了 href="javascript:;"。这两种写法虽然在大部分现代浏览器中都能阻止页面发生跳转，但在语法规范、运行原理以及工程可维护性上存在差异。核心结论很明确：在必须从二者中选择的前提下，javascript:void(0) 比 javascript:; 更好、更规范；而在现代前端工程标准中，两者均应逐步被原生的按钮元素或标准的事件拦截机制所替代。

一、核心结论：为什么 void(0) 更加可靠

javascript:void(0) 和 javascript:; 都是利用 HTML <a> 标签的 javascript: 伪协议（Pseudo-protocol）来执行一段内联脚本。浏览器的统一行为准则是：只有当伪协议表达式执行完毕后的返回值为 undefined 时，浏览器才会维持原网页不变；如果返回了具体的值（如字符串），浏览器将使用该值替换整个页面内容。

• javascript:void(0) 的明确性：void 是 JavaScript 的内置一元操作符。无论传给它什么参数，void expression 的运算结果在 ECMAScript 规范中被严格定义为恒等于 undefined。它具有标准的语义保障，任何符合规范的 JS 引擎都不会对其产生歧义。
• javascript:; 的局限性：分号 ; 在 JavaScript 中代表一条空语句（EmptyStatement）。空语句本身没有显式的完成值，在大部分浏览器的宽松模式下其默认结果表现为 undefined。但这种写法本质上是省略具体逻辑的语法边缘简写，并非标准设计的求值表达式。在部分老旧移动端引擎或严格静态代码分析工具中，容易被识别为语法格式瑕疵。

图 1：超链接中 javascript: 伪协议的解析与执行分支原理

二、深入技术细节：多维度对比

为了让选择依据更具说服力，我们可以从字符长度、语义规范度、执行成本以及安全策略等多个维度来对比这两种写法：

图 2：两者的技术指标与规范性综合对比

三、实际开发中的选型与重构步骤

在面对不同的项目场景时，开发者应该如何决定使用哪种写法？可以按照以下四个步骤进行技术判断与重构：

1. 步骤一：辨析交互意图。确认该元素的核心功能究竟是“页面跳转导航”还是“触发就地逻辑操作”（如展开抽屉、弹出对话框、提交表单）。
2. 步骤二：若为就地交互，优先选用原生 <button>。无需利用 <a> 标签伪装按钮，直接使用 <button type="button"> 并结合 CSS 样式重置，从根源上免去对 javascript: 伪协议的依赖。
3. 步骤三：若保留超链接，使用事件阻止机制。如果因为设计库、SEO 抓取或结构限制必须使用 <a> 标签，应在 JavaScript 事件监听中通过 event.preventDefault() 阻止导航默认行为。
4. 步骤四：若必须内联在 href 中，选用 javascript:void(0)。在无法统一绑定外部事件监听的旧模板中，严格统一使用规范明确的 javascript:void(0)。

图 3：现代交互元素设计与遗留代码降级决策路径

四、为什么现代前端建议告别这两种写法

虽然我们得出了 javascript:void(0) 优于 javascript:; 的结论，但在现代前端开发规范中，这两种写法都属于应当被淘汰的技术债务。主要原因包括：

1. 内容安全策略（CSP）冲突

现代 Web 应用普遍启用了 CSP（Content Security Policy）安全头。为了防范跨站脚本攻击（XSS），标准的安全配置通常会声明：

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

在这种策略下，浏览器会默认拦截一切内联脚本。无论是 href="javascript:void(0)" 还是 href="javascript:;"，都会在浏览器控制台直接抛出安全策略违规错误并被强行阻断。

2. 无障碍访问（Accessibility / A11y）缺陷

屏幕阅读器和辅助设备在遇到 <a> 标签时，会将其判定为“超链接”，并期望它能引导用户导航到某个页面或页面锚点。如果实际功能是弹窗或删除操作，盲人用户无法从语义中获取真实意图。此外，常规链接无法像标准按钮那样响应键盘空格键触发事件，影响全键盘用户的操作体验。

3. 现代推荐的代码实现方案

如果希望制作一个外观像链接、但实际触发操作的元素，现代标准做法如下：

<!-- 推荐方案一：语义化按钮，结合 CSS 重置默认样式 -->
<button type="button" class="link-styled-button" onclick="handleAction()">
  点击执行操作
</button>

<style>
.link-styled-button {
  background: none;
  border: none;
  padding: 0;
  color: #0284c7;
  text-decoration: underline;
  cursor: pointer;
  font: inherit;
}
</style>

<!-- 推荐方案二：必须使用 a 标签时的正规事件拦截 -->
<a href="#modal-dialog" id="actionLink">打开弹窗</a>

<script>
document.getElementById('actionLink').addEventListener('click', function(event) {
  event.preventDefault(); // 阻止默认锚点跳转
  openModal();
});
</script>

五、知识梳理与核心总结

为了帮助读者在日常开发中形成清晰的选型标准，我们将核心知识点汇总如下：

图 4：javascript:void(0) 与 javascript:; 知识体系与演进建议