javascript：void(0)与event.preventDefault()的区别：哪种阻止跳转方式更好

在现代前端开发中，使用 event.preventDefault() 明显优于 javascript:void(0)。如果交互仅仅是触发页面逻辑而无需导航，业界公认的最佳实践甚至不是阻止链接跳转，而是直接使用原生的 <button type="button">。javascript:void(0) 依托于老旧的伪协议语法，会带来破坏内容安全策略（CSP）、破坏可访问性、导致右键新标签异常等一系列副作用；而 event.preventDefault() 遵循标准的 W3C 事件流模型，在完全解耦 HTML 与逻辑的同时，保留了优雅降级与可访问性支持。

核心判断：两者的本质差异

虽然这两种写法在表面上都可以达到“点击超链接后页面不发生刷新跳转”的效果，但浏览器在底层所经历的生命周期完全不同：

• javascript:void(0) 是伪协议表达式求值：它直接写在 HTML 的 href 属性中，利用 javascript: 协议执行 void(0) 计算。void 运算符对任何操作数求值后都会固定返回 undefined。浏览器接收到 undefined 后，判断该执行结果不需要替换当前文档页面，从而停留在当前视图。
• event.preventDefault() 是标准事件生命周期控制：它运行在 JavaScript 绑定的事件监听器中，作用是将触发的 DOM Event 对象的内部属性 defaultPrevented 标记置为 true。当事件冒泡与捕获阶段全部结束后，浏览器检查该标记，进而取消该元素所预设的原生默认动作（如 <a> 标签的根据 href 导航、<form> 标签的页面提交等）。

为什么不推荐使用 javascript:void(0)

在早期的 Web 开发中，由于直接使用 href="#" 会导致页面滚动条骤然回滚到顶部，开发者普遍采用 href="javascript:void(0)" 作为替代方案。但在现代工程标准下，该方案暴露了多重架构与体验隐患：

1. 触犯内容安全策略（CSP）

为了防御跨站脚本攻击（XSS），现代企业级系统普遍配置了严格的 Content Security Policy（CSP）。在 CSP 策略中，只要未显式开启高风险的 'unsafe-inline' 指令，浏览器就会全面阻止所有内联脚本及 javascript: 伪协议的解析与执行。一旦配置生效，带有 href="javascript:void(0)" 的元素会在控制台直接抛出安全策略违规错误，甚至导致后续业务逻辑直接中断。

2. 破坏链接的天然交互体验

超链接（<a>）是 Web 基础构件，用户对其有着天然的预期：

• 状态栏提示混乱：当用户将鼠标悬停在链接上方时，浏览器左下角状态栏会直接显示 javascript:void(0)，无法提供任何有意义的目标信息。
• 破坏辅助操作：用户习惯使用鼠标中键、右键菜单选择“在新标签页中打开”或快捷键 Ctrl/Cmd + 点击。若 href 被设为 javascript:void(0)，浏览器在新标签页中打开的将是一个完全空白的无内容页面（about:blank 状态），造成极其糟糕的交互体验。

3. 违背无障碍规范（Accessibility / a11y）

屏幕阅读器等辅助设备依赖 HTML 语义向视障用户转述页面功能。当屏幕阅读器遇到 <a> 标签时，会宣告其为“链接”。若链接没有可导航的真实地址，仅是用于执行某些弹窗或切换动作，用户将无法理解该元素的作用。根据 WAI-ARIA 规范，非导航用途的交互控件应当使用具备焦点管理与键盘回车/空格触发特性的 <button>。

深入理解 event.preventDefault() 的工作机制

event.preventDefault() 是 DOM Level 2 事件规范引入的基石方法。要正确使用它，需要理清以下两个核心边界：

只阻止默认行为，不阻止事件冒泡

很多初学者容易将 event.preventDefault() 与 event.stopPropagation() 混淆。调用 preventDefault() 仅仅是告诉浏览器“不要执行该事件后续的默认原生行为（例如打开新页面）”，但该事件依然会沿着 DOM 树正常向上冒泡传播。父级容器上注册的代理监听器依然能够正常捕获并处理该事件。如果同时希望停止向上传播，必须显式调用 event.stopPropagation()。

// 基础拦截示例
const link = document.querySelector('#action-link');

link.addEventListener('click', (event) => {
  // 1. 阻止链接默认跳转
  event.preventDefault();

  // 2. 检查默认行为是否已被取消
  console.log(event.defaultPrevented); // 输出: true

  // 3. 执行纯前端业务逻辑（例如异步拉取数据或打开弹窗）
  openDetailModal();
});

代码迁移与实施步骤

如果项目中遗留了大量的 javascript:void(0)，推荐通过以下四个严谨步骤进行逐步重构与规范化升级：

步骤一：审查元素语义与真实意图

遍历页面中的所有超链接，检查该点击动作是否伴随着页面 URL 的变动或对特定资源的定位。如果该元素点击后仅执行打开侧边栏、删除行记录、弹出确认对话框等操作，说明它在本质上是一个按钮而非链接。

步骤二：重写 HTML 标签结构

针对无需真实导航的交互场景，直接将其替换为 <button type="button">，并使用 CSS 重设外观：

<!-- 改造前：伪装成链接的按钮 -->
<a href="javascript:void(0)" onclick="deleteItem(12)">删除</a>

<!-- 改造后：语义化原生按钮 -->
<button type="button" class="btn-text-action" data-id="12">删除</button>

步骤三：为 SPA 客户端路由保留有效链接与渐进增强

如果是单页应用（SPA）中的路由跳转，链接应当指向真实的 URL 地址（便于搜索引擎收录及用户按住 Ctrl/Cmd 在新标签页打开），同时在前端监听器中通过 event.preventDefault() 阻止浏览器刷新，改由路由控制器执行视图切换：

<!-- 具备渐进增强特性的标准链接 -->
<a href="/article/details/1024" id="nav-link">阅读全文</a>

<script>
document.querySelector('#nav-link').addEventListener('click', (event) => {
  // 允许用户使用快捷键（如 Meta/Ctrl/Shift 键）正常打开新标签页
  if (event.metaKey || event.ctrlKey || event.shiftKey) {
    return;
  }

  // 拦截普通点击，改用客户端 SPA 路由跳转
  event.preventDefault();
  router.push(event.currentTarget.getAttribute('href'));
});
</script>

技术选型：哪种场景使用哪种方式

为了在实际开发中快速作出判断，可以通过以下决策流明确各种场景的最优选择：

多维度综合对比总结

通过以下五个核心工程维度的对照，可以系统性地看到两者的综合差异：