现代前端开发还需要用javascript：void吗

一、为什么过去前端频繁出现 javascript:void(0)

在 Web 2.0 早期甚至更早的网页制作时期，开发者在编写 HTML 模板时，经常希望某个元素具有超链接的外观和光标手势（cursor: pointer），但在用户点击后，并不希望浏览器真正跳转到新页面，而是仅执行一段通过 JavaScript 绑定的交互逻辑。

在 HTML 规范中，超链接标签 <a> 如果不写 href 属性，浏览器通常不会为其赋予默认的链接样式与键盘聚焦行为。因此开发者通常会为 href 填入占位值，其中最常见的两种就是 href="#" 与 href="javascript:void(0)"。

javascript: 属于浏览器历史上支持的一种特殊 URL 伪协议（Pseudo-protocol）。当浏览器地址栏或 href 属性解析到该协议时，引擎会把冒号后面的内容当作 JavaScript 表达式执行。如果表达式返回了非 undefined 的值，早期浏览器甚至会直接把返回值转为字符串，并用其替换当前页面的全部文档内容。

JavaScript 中的 void 是一个一元运算符，它会对紧随其后的表达式求值，并固定返回 undefined。因此，执行 void(0) 或 void 0 的结果恒为 undefined。利用这个特性，javascript:void(0) 能够让代码在被点击时既不执行页面刷新，也不产生覆盖文档的返回值，同时成功绕开了 href="#" 会强制把页面滚动到顶部或污染浏览器历史记录的问题。

二、现代前端不再需要它的四大根本原因

随着前端技术栈的演进与 W3C/WHATWG 规范的成熟，编写清晰、安全、可访问的代码已经成为基线要求。继续在代码中使用 javascript:void(0) 会在四个关键维度引入不可忽视的问题：

1. HTML 语义化与无障碍访问（Accessibility / a11y）严重受损

HTML 规范对超链接与按钮有非常严格的语义分工：

• <a> 元素：代表超链接（Hyperlink），它的核心功能是实现页面间的导航或跳转到特定定位点。
• <button> 元素：代表可激活的控制按钮，它的核心功能是在当前上下文触发某种动作或状态变更。

使用 javascript:void(0) 本质上是用链接标签伪装成按钮。这种行为会给视障用户或使用屏幕阅读器（Screen Reader）的用户带来巨大困扰。屏幕阅读器会向用户播报“链接：某某功能”，用户会预期按下回车后跳转到新页面，但实际发生的却是就地弹窗或表单操作。

更为关键的是键盘交互的差异：在浏览器的标准行为中，原生 <button> 在获得焦点时，支持用户敲击 Enter（回车键） 或 Space（空格键） 激活；而 <a> 默认仅响应 Enter 键，对 Space 键则表现为向下滚动页面。这意味着如果开发者只用 <a href="javascript:void(0)">，键盘导航用户的操作逻辑便会出现断裂。

2. 现代内容安全策略（CSP, Content Security Policy）拦截阻断

在企业级应用、金融系统以及现代化前端工程中，为了杜绝跨站脚本攻击（XSS），服务端通常会配置严格的内容安全策略响应头，例如：

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

在严格的 CSP 策略下，浏览器会禁止执行一切内联脚本代码。因为 href="javascript:..." 属于内联脚本执行入口，当用户点击该链接时，控制台会立刻抛出安全违规异常（Security Policy Violation），导致点击逻辑彻底失效：

Refused to run the JavaScript URL because it violates the following Content Security Policy directive: "script-src 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-...'), or a nonce ('nonce-...') is required to enable inline execution.

3. 现代前端框架事件驱动体系全面接管

在主流单页应用架构（如 React、Vue、Angular、Svelte）中，事件绑定早已告别了直接在 HTML 属性中拼接字符串的时代。例如在 Vue 中可以直接使用 @click="handleAction"，在 React 中使用 onClick={handleAction}。组件框架通过虚拟 DOM 或响应式系统直接管理真实的 DOM 事件侦听器，根本不需要依赖 href 属性来承载代码执行逻辑。

4. 破坏浏览器的原生交互直觉

当普通用户看到一个超链接时，直觉上会认为它是一个可以右键“在新标签页中打开”或“复制链接地址”的资源。如果链接地址是 javascript:void(0)：

• 用户点击滚轮（或 Ctrl/Cmd + 鼠标左键）在新标签页打开时，新标签页只会停留在 about:blank 或直接报错，造成糟糕的用户体验。
• 搜索引擎爬虫在索引页面时，会尝试跟踪该链接，抓取到的却是无意义的伪协议，浪费站点的抓取配额。

三、现代前端的标准替代方案与重构步骤

在实际项目中，彻底淘汰 javascript:void(0) 非常简单。根据交互的核心目标，业界成熟的解决方案可分为两类：

方案 A：针对纯操作型元素（使用语义化 button）

如果元素的目标是执行某种操作（例如：打开弹窗、展开折叠栏、触发数据刷新），最规范的做法是直接使用 <button type="button">。

许多初学者过去之所以排斥 <button>，是因为浏览器对按钮有默认的灰色背景和凹凸边框样式。实际上，只需要在 CSS 中进行轻量的样式重置，就能让 <button> 拥有和文字链接一模一样甚至更灵活的外观：

/* 基础 CSS 重置：让按钮呈现为扁平文字链接外观 */
.link-button {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: #AD8B58;
  cursor: pointer;
  text-decoration: underline;
  display: inline;
}

.link-button:hover {
  color: #394957;
}

.link-button:focus-visible {
  outline: 2px solid #AD8B58;
  outline-offset: 2px;
}

对应 HTML 结构极为简洁：

<!-- 改造后：语义化、支持无障碍与键盘导航 -->
<button type="button" class="link-button" id="triggerModal">打开设置中心</button>

方案 B：针对带回退路由的链接型元素（使用 event.preventDefault()）

如果当前元素确实代表一个真实资源，或者需要支持渐进增强（Progressive Enhancement）——即用户在未加载 JS 或右键在新标签页打开时能够跳转到真实页面，但在 SPA 内部希望拦截该跳转改用无刷新的路由组件渲染，此时应当保留有效 href，并在事件中调用 event.preventDefault()：

<a href="/user/profile" id="userLink">查看个人主页</a>

<script>
  const userLink = document.getElementById('userLink');
  userLink.addEventListener('click', (event) => {
    // 允许用户按住 Ctrl/Cmd 键时按浏览器原生机制在新标签页打开
    if (event.ctrlKey || event.metaKey || event.shiftKey) {
      return;
    }
    // 阻止默认跳转并由单页应用路由接管
    event.preventDefault();
    router.push('/user/profile');
  });
</script>

四、开发场景快速选型决策指南

为了在实际业务开发与代码审查中建立统一的标准，可以通过以下流程图与对照表快速完成技术选型：

五、极少数依然存在该写法的边缘场景

尽管在常规业务前端开发中 javascript:void 已经被完全替代，但它之所以至今仍没有被从 JavaScript 语言规范中彻底抹去，是因为还存在极个别的特殊场景：

• 浏览器书签脚本（Bookmarklets）： 用户可以直接把一段包含 JavaScript 逻辑的代码保存为浏览器的书签。在点击书签时，代码会在当前页面上下文中执行。书签脚本必须确保整段代码的最终返回值为 undefined，否则浏览器会立刻将当前页面重定向并渲染返回值。因此，许多书签工具会在脚本末尾追加 void(0) 作为安全防护，例如：

  javascript:(function(){ console.log('Bookmarklet executed'); })();void(0);

• 维护年代久远的超旧遗留系统： 在一些由于历史原因无法整体重构的遗留 JSP、ASP 或旧版 CMS 模板中，可能存在大量深度依赖 href="javascript:void(0)" 的旧式组件库。在这些系统上，如果修改成本过高且未开启严格的 CSP，开发团队通常会暂时维持现状。但在任何新建项目或现代重构分支中，均不应再写入任何新的 javascript:void。

结语

javascript:void(0) 是早期 Web 缺乏规范与样式能力时的历史妥协产物。在现代前端体系中，无论从可访问性标准（WAI-ARIA）、网络安全标准（CSP），还是前端框架的工程实践来看，它都已被更健壮、更标准的技术方案所完全取代。

在日常开发中，请牢记两句话原则：做操作，请用 <button type="button">；做导航，请用带真实路径的 <a> 并结合 event.preventDefault()。遵循这一准则，你的代码将更加优雅、安全且具有良好的无障碍体验。