怎么在 href 中使用 javascript：void(0) 阻止链接跳转

作者：竹影

时间：2026-10-30

详细讲解如何在 HTML 链接的 href 属性中使用 javascript:void(0) 阻止页面跳转，剖析其运作原理、具体实现步骤、与常见方案的对比及注意事项。

文章目录

在前端页面开发中，如果需要保留 <a> 标签的手型光标和视觉交互，又要求点击该链接时不产生页面刷新、不跳转新地址且不回到页面顶部，直接在 href 属性中写入 javascript:void(0) 是最直接可靠的实现方法。本文将详细讲解这一写法的具体实现方式、底层执行原理、与其它方案的对比及实际开发注意事项。

一、javascript:void(0) 的核心写法与运作机制

在 HTML 超链接中，标准的写法是将 href 设置为 javascript:void(0)，并将具体需要触发的交互逻辑绑定在 onclick 事件属性或事件监听器中：

<!-- 基础内联写法 -->
<a href="javascript:void(0)" onclick="openModal()">打开弹窗</a>

要理解为什么这样写能阻止跳转，需要将其拆分为两个部分进行剖析：

javascript: 伪协议：当浏览器在 href 中遇到 javascript: 时，不会发起网络请求或页面重定向，而是将冒号后面的内容当作一段 JavaScript 脚本直接在当前上下文执行。
void(0) 运算：void 是 JavaScript 的内置一元操作符。它的作用是对括号或后面的表达式进行求值，并始终返回 undefined。这里的 0 仅作为一个轻量的占位参数，计算 0 无任何副作用。
浏览器的渲染判定：按照规范，如果 javascript: 伪协议的表达式返回了一个具体值（如字符串或数字），浏览器会尝试用该返回值覆盖当前页面的内容；但如果返回的是 undefined，浏览器就会判定本次操作无需导航，页面停留在原地，不发生任何跳转或滚动。

图 1：javascript:void(0) 的内部执行流程与浏览器渲染判定

二、具体应用场景与规范操作步骤

在实际编码中，单纯写入 javascript:void(0) 只能起到阻止跳转的作用，通常需要搭配事件处理函数实现业务。推荐的标准操作分为以下三步：

1. 编写 HTML 结构并配置 href

将 <a> 标签的 href 严格设置为 javascript:void(0)。这样能够保证在悬停时浏览器左下角展示清晰的伪协议标识，且链接拥有默认的指针状态和键盘聚焦能力。

2. 绑定事件处理器

既可以使用 HTML 属性 onclick 绑定，也可以在脚本中通过 addEventListener 添加监听。推荐将业务逻辑抽离至独立的函数中，保持标签简洁。

3. 示例代码演示

下面是一个包含内联绑定与现代事件监听器绑定的完整网页示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>链接操作示例</title>
</head>
<body>

  <!-- 方式一：内联 onclick 调用 -->
  <a href="javascript:void(0)" onclick="handleDownload('doc-101')">下载文档（内联）</a>

  <!-- 方式二：通过 ID 解耦监听 -->
  <a href="javascript:void(0)" id="likeBtn">点赞文章（监听器）</a>

  <script>
    function handleDownload(id) {
      console.log('触发下载任务，ID:', id);
    }

    const likeBtn = document.getElementById('likeBtn');
    likeBtn.addEventListener('click', function(e) {
      console.log('点赞成功！');
    });
  </script>
</body>
</html>

图 2：在 href 中使用 javascript:void(0) 的规范实施步骤

三、与其它阻止跳转方案的横向对比

阻止 <a> 标签跳转或实现纯按钮操作常见有四种方案：javascript:void(0)、href="#"、event.preventDefault() 以及使用原生 <button>。了解它们的差异有助于针对项目做出恰当选择。

方案	实现示例	页面滚动与 URL 影响	适用场景与局限
javascript:void(0)	`href="javascript:void(0)"`	不改变 URL，页面不发生任何滚动	适合旧项目维护、轻量交互；但在严格 CSP 环境下可能受限。
href="#"	`href="#"`	会在 URL 尾部添加 `#`，默认跳回页面顶部	不推荐。必须额外在 JS 中阻止默认行为，否则滚动体验极差。
preventDefault()	`e.preventDefault()`	不改变 URL，页面不滚动	现代项目标准方案。结构语义干净，但若 JS 报错中断可能导致跳转。
button 标签	`<button type="button">`	完全无跳转逻辑，原生无障碍支持	最佳语义化方案。纯动作交互本应使用 button，结合 CSS 调整外观。

图 3：阻止链接跳转的四大实现方案特性对比

四、实际开发中的注意事项与现代替代方案

虽然 javascript:void(0) 使用起来非常简单，但在现代前端开发中需要注意以下几个约束与潜在问题：

重要注意：内容安全策略（CSP）限制

当网站启用了严格的内容安全策略（Content Security Policy），并在 HTTP 响应头中配置了如 script-src 'self'（且没有开启 'unsafe-inline'）时，浏览器会直接阻止 javascript: 伪协议的执行并在控制台抛出报错。这是该方案在现代工程中最主要的技术风险。

无障碍（Accessibility）问题：屏幕阅读器会根据 <a> 标签告知视障用户这是一个“超链接”，用户会期望它导航至某个页面。如果它实际上只是一个触发弹窗或折叠面板的操作按钮，应改用 <button>，或补充 role="button" 属性以改善无障碍体验。
避免书写复杂逻辑：严禁在 href="javascript:..." 中直接编写复杂的多行逻辑代码，这会增加转义难度并导致代码难以调试和维护。

图 4：阻止链接跳转的技术方案选型决策图

五、总结

在 HTML 超链接的 href 中设置 javascript:void(0) 是前端开发中解决“链接空点击”和“阻止跳转”的高频技巧。它的原理在于利用 void(0) 产生一个无意义的 undefined 返回值，从而指示浏览器不必进行页面重新渲染与导航。

对于已有项目或轻量级静态页面，直接使用 href="javascript:void(0)" 可以快速消除 href="#" 带来的跳顶副作用；而在注重无障碍访问、规范化架构以及启用了严格内容安全策略（CSP）的现代前端项目中，优先推荐使用 <button type="button"> 或在脚本中通过 event.preventDefault() 拦截事件。