点击链接不跳转：javascript：void(0)与return false的区别

一、现象切入：为什么 a 标签会引发“跳顶”或刷新？

在 HTML 中，超链接 <a> 默认拥有导航行为。当开发者为了使用 CSS 样式或保留手型光标（cursor: pointer）而直接写出 <a href="#" onclick="doSomething()"> 时，经常会遇到一个典型细节：点击后页面瞬时滚动到最顶部。

这是因为 href="#" 代表当前页面的空锚点，点击后浏览器会尝试定位至顶部文档根节点并向浏览历史记录添加一条记录。为了解决这个问题，开发社区衍生出了两种常见写法：

• 写法 A（伪协议）：<a href="javascript:void(0);" onclick="doSomething();">操作</a>
• 写法 B（事件拦截）：<a href="#" onclick="doSomething(); return false;">操作</a>

尽管这两种方式在表面上都能达到“点击后不跳转、不回滚页面”的效果，但在浏览器的运行时机制中，它们位于完全不同的处理层级。

二、核心差异：执行时序与生命周期链条

要理解两者的本质差异，必须厘清浏览器在用户点击链接时的内部处理流。当用户点击一个超链接元素时，浏览器会按顺序经历事件派发阶段（捕获与冒泡）、执行绑定的 onclick 监听函数，最后在没有被拦截的前提下，执行该标签的原生默认行为（即导航到 href 指定的目标）。

从图 1 可以直观地看到：

1. return false 是“前置拦截”：在事件处理函数执行时生效。它直接告知宿主环境取消后续的默认行为，因此浏览器根本不会进入“解析并跳转 href”这一步骤。
2. javascript:void(0) 是“默认动作的自洽处理”：事件处理函数正常放行，浏览器进入了默认动作解析流程；但因为 href 填入的是 JavaScript 伪协议，且计算结果为 undefined，浏览器根据规范不替换当前文档，从而被动地停留在原处。

三、深层机制拆解：void 操作符与 DOM 0 级返回值

为了在实际开发中做出稳健的技术选型，需要进一步透视这两项技术的底层规范。

1. void 操作符与 JavaScript 伪协议

在 ECMAScript 规范中，void 是一个一元操作符。其语法为 void expression，它的作用是计算后面的表达式，但一律返回 undefined。

当浏览器解析以 javascript: 开头的 URL 伪协议时，会调动 JS 引擎执行该代码片段：

• 如果表达式的返回值不是 undefined（例如 javascript:'hello'），浏览器会将返回的内容直接渲染为新文档，覆盖当前页面；
• 如果表达式返回 undefined（例如 void(0) 或 void 0），浏览器则认为不需要导航，保留当前页面状态。

2. return false 的实际包裹与作用边界

当我们在 HTML 属性中写下 onclick="return false;" 时，浏览器在解析 HTML 时会自动为该属性生成一个包裹函数：

// 浏览器内联解析伪代码
aElement.onclick = function(event) {
  doSomething();
  return false;
};

在经典的 DOM 0 级事件模型中，事件处理函数返回 false，等同于执行了 event.preventDefault()，有些浏览器或库（如 jQuery）还会额外附加 event.stopPropagation()。

四、避坑实践：潜在风险与排查改造步骤

在实际工程开发中，单纯依赖这两者往往会遇到隐蔽的边界问题：

document.querySelector('a').addEventListener('click', function() {
  // 业务逻辑
  return false; // 在 addEventListener 中完全无效！
});

五、全维度选型对比与总结

为了在面对老旧项目维护与现代项目架构时能够准确选择，我们将常见方案的关键维度整理如下：

综上所述，javascript:void(0) 和 return false 是前端发展史上针对链接跳转机制从不同角度给出的过渡方案。理解它们在“URL 伪协议解析”与“DOM 事件阻止默认行为”两端的差异，不仅有助于快速排查老旧代码中的跳顶与异常失灵，更是编写现代、稳健且符合规范的前端交互的重要基石。