javascript：void(0)、href="#" 与 preventDefault 的区别及最佳实践

一、href="#" 的工作机制与副作用

href="#" 的初衷是锚点链接（Fragment URL）。在 HTML 规范中，井号 # 后面通常紧跟页面内某个元素的 ID。当井号后没有指定任何 ID 或该 ID 不存在时，浏览器的默认行为是将文档滚动位置直接重置到页面顶端（即 scrollY = 0）。

早期开发中选择 href="#" 的主要原因在于：仅当 <a> 标签包含 href 属性时，浏览器才会赋予其默认的手型光标（cursor: pointer）、可被键盘 Tab 键聚焦（Tab-focusable）以及默认的访问颜色与下划线样式。

<!-- 典型反面示例：用户在页面底部点击后，页面瞬间跳回顶部 -->
<a href="#" onclick="openModal();">打开弹窗</a>

这种写法存在三个显而易见的副作用：

• 视口意外跳顶：如果用户在长文章滚动到底部时点击该链接，页面会骤然跳回顶部，严重破坏用户的阅读心智与浏览连续性。
• URL 与历史记录污染：地址栏末尾会被强制追加一个 #。如果项目使用了前端哈希路由（Hash History，如 #/dashboard），该操作还可能直接破坏路由匹配状态。
• 历史栈冗余：每次点击都会向浏览器的会话历史中推送一个新状态，导致用户点击浏览器的“后退”按钮时无法正常回到上一页。

二、javascript:void(0) 的语法本质与现代局限

javascript:void(0) 由两部分组成：javascript: 伪协议和 void 单目运算符。

在 ECMAScript 规范中，void 是一个一元操作符，用于计算其后面的表达式，并始终返回 undefined。例如 void(0)、void 0 或 void("hello") 的计算结果均为 undefined。

// 控制台执行运算验证
console.log(void 0);          // 输出: undefined
console.log(void(1 + 1));      // 输出: undefined

当浏览器地址或链接被指定为 javascript: 伪协议时，浏览器会调用 JavaScript 引擎执行其后的代码。若返回值不为 undefined（例如 javascript:'hello'），浏览器会用该返回值的字符串替换当前文档内容；而当返回值为 undefined 时，浏览器将保持当前文档不变，既不跳转也不刷新，因此避免了 href="#" 的跳顶问题。

三、event.preventDefault() 的标准事件流控制

event.preventDefault() 是 W3C DOM Level 2 事件模型中规定的原生标准方法。它的作用是取消浏览器针对当前事件类型预设的默认动作（Default Action），例如超链接的导航重定向、表单的提交刷新或复选框的状态切换。

1. 底层拦截原理

当一个可取消事件（event.cancelable === true）被创建并派发时，事件对象内部维护了一个隐式的布尔标志位 defaultPrevented，其初始值为 false。在事件捕获或冒泡路径上的任何一个监听器中调用 event.preventDefault()，该标志位就会被置为 true。当整个事件流传播完毕后，浏览器在执行底层操作前会核查此标志位，若为 true，则放弃执行原生的跳转逻辑。

2. 与 stopPropagation() 的严格边界

许多初学者容易将 preventDefault() 与 stopPropagation() 混淆。两者的职责完全不同：

• event.preventDefault()：阻断默认行为（例如不让链接跳转），但事件仍然会沿着 DOM 树正常向上冒泡，父级容器绑定的点击监听器依然能够正常收到该事件。
• event.stopPropagation()：阻断事件传播，停止事件在捕获或冒泡链上的继续传递，但无法直接阻止当前元素本身的默认动作（除非另行调用 preventDefault）。

3. 渐进增强（Progressive Enhancement）优势

event.preventDefault() 最强大的地方在于支持“渐进增强”。你可以为 <a> 标签配置真实的备用 URL 地址（Fallback URL）。在网络畅通且脚本成功执行时，通过 preventDefault() 拦截并执行流畅的单页操作（如弹出对话框或前端路由切换）；即使用户的 JavaScript 执行出错或网络受限，点击链接仍能正常降级跳转至目标页面，确保核心功能始终可用。

<!-- 具备渐进增强特性的标准 HTML -->
<a href="/user/profile" id="profile-link">个人中心</a>

<script>
  const link = document.getElementById('profile-link');
  link.addEventListener('click', (event) => {
    // 显式拦截原生跳转
    event.preventDefault();
    
    // 触发平滑的单页模态交互
    openProfileModal();
  });
</script>

四、三者的核心差异横向对比

为了让不同方案在实际项目中的优劣一目了然，我们围绕页面行为、系统状态、安全规范与可维护性进行全方位对比：

五、现代前端的最佳实践准则

准则一：区分“导航”与“操作”，非导航动作首选 <button>

HTML 规范对元素的语义分工非常明确：

• <a> 标签专门用于页面跳转、锚点导航或资源下载。只要交互没有引起 URL 变化或页面导航，就不应该使用 <a> 标签。
• <button type="button"> 专门用于页面就地动作（如弹出浮层、展开收起、异步点赞、切换选项卡等）。

很多开发者过去宁可用 <a> 也不用 <button>，主要是因为浏览器自带的按钮样式比较厚重。实际上，只需几行通用的 CSS 代码即可将其重置为外观与文本链接完全一致的轻量元素：

/* 通用重置：让 button 拥有纯文本链接的外观与行为 */
.link-button {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: #687D8D;
  cursor: pointer;
  text-decoration: underline;
}

.link-button:hover {
  color: #2C3E50;
}

使用 <button type="button"> 带来两个巨大的天然优势：

1. 无障碍键盘支持：无需任何额外代码，浏览器天生支持使用键盘的 Enter 和 Space（空格键）激活按钮；而 <a> 标签默认只能通过 Enter 触发，无法被空格键触发。
2. 无默认跳转负担：显式声明 type="button"（注意必须声明，否则在表单内会被默认当成 type="submit" 提交表单）后，它根本不会产生页面重载或跳顶动作，完全免去编写 preventDefault() 的样板代码。

准则二：如需使用 <a> 进行 JS 增强，务必配合有效 href 与 preventDefault

当你的交互确实需要在视觉和语义上作为链接呈现，并且希望提供无脚本运行环境下的降级能力时，应保留真实有效的路径，并在外置的 JS 脚本中调用 event.preventDefault()：

<!-- 规范实现：HTML 负责语义与容灾，JS 负责富交互 -->
<a href="/articles/1024" class="preview-link" data-id="1024">预览文章</a>

<script>
  document.querySelector('.preview-link').addEventListener('click', (e) => {
    // 1. 显式阻止默认的新页面跳转
    e.preventDefault();
    
    // 2. 读取关联数据并执行就地抽屉展示
    const articleId = e.currentTarget.dataset.id;
    openArticleDrawer(articleId);
  });
</script>

准则三：遗留系统重构过渡清单

如果维护的是包含大量历史代码的老项目，可以按照以下步骤安全平滑地进行改造：

• 步骤 1：排查全局 href="#"，如果仅用于触发 JS 事件，直接替换为 <button type="button" class="link-button">，或补充 event.preventDefault()。
• 步骤 2：彻底清除 javascript:void(0) 与内联 onclick，将事件监听移至独立的 JS 文件中，为开启 CSP（内容安全策略）铺平道路。
• 步骤 3：验证无障碍焦点状态，确保键盘按键（Tab、Enter、Space）在所有交互元素上都能顺畅流转并正确反馈。

六、总结

总结起来：

• href="#" 属于锚点语法滥用，会导致视口跳顶与历史记录污染，应在交互元素中彻底杜绝；
• javascript:void(0) 属于上个时代的内联脚本产物，虽能阻断跳转，但与 CSP 安全规范及现代无障碍标准背道而驰；
• event.preventDefault() 是标准的事件流控制机制，赋予了前端优雅降级与可控拦截的能力；
• 而在绝大多数非导航的按钮操作场景下，语义正确的 <button type="button"> 才是最简洁、稳健且标准的最佳实践。