首页 > 网络编程 > JavaScript > javascript技巧 > javascript:void(0)含义

javascript:void(0)含义及使用说明

2026-01-25 10:11:15 作者：AI老李

`javascript:void(0)`是一种在HTML `<a>` 标签中使用的技术,用于创建一个点击后不会触发页面跳转的链接,它结合了JavaScript的void操作符和`javascript:`伪协议

关键要点

研究表明，javascript:void(0) 是一种在 JavaScript 中创建不跳转链接的常见方法。
它利用 void 操作符计算表达式但返回 undefined，从而阻止浏览器执行默认行为。
证据倾向于认为，这种用法常用于“死链接”或绑定 JavaScript 事件时避免页面跳转。
现代最佳实践建议使用事件绑定代替 javascript: 伪协议，可能存在争议。

什么是javascript:void(0)？

javascript:void(0) 是一种在 HTML <a> 标签中使用的技术，主要用于创建一个点击后不会触发页面跳转的链接。它结合了 JavaScript 的 void 操作符和 javascript: 伪协议。

void 操作符：void 是 JavaScript 中的一个操作符，它会计算一个表达式但不返回任何值（即返回 undefined）。例如，void(0) 会计算 0，但结果是 undefined。
javascript: 伪协议：在链接的 href 属性中，使用 javascript: 可以直接执行 JavaScript 代码。当使用 javascript:void(0) 时，浏览器会执行 void(0)，返回 undefined，从而阻止任何页面跳转或加载新内容。

为什么使用它？

创建“死链接”：有时需要一个看起来像链接但点击后不做任何事的元素，比如在 UI 设计中，链接可能只用于触发 JavaScript 事件。
阻止默认行为：如果不指定 href，浏览器可能将链接视为指向当前页面的 #，点击后会跳到页面顶部。javascript:void(0) 可以避免这种行为。
历史兼容性：在旧浏览器中，这种方法被广泛使用，因为它简单有效。

示例

以下是一个简单的例子：

不做任何事的链接：

<a href="javascript:void(0)" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >点击我，什么也不会发生</a>

触发 JavaScript 但不跳转：

<a href="javascript:void(0)" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  onclick="alert('Hello, World!')">点击我，弹出警示框</a>

最佳实践

虽然 javascript:void(0) 常用，但现代 Web 开发建议避免使用 javascript: 伪协议。推荐方法包括：

使用 href="#" 并在 onclick 中调用 event.preventDefault()。
使用 JavaScript 事件监听器，例如 addEventListener，更符合标准。

详细报告

本文旨在全面讲解 JavaScript 中的 javascript:void(0)，一种在 Web 开发中用于创建不触发页面跳转的链接的技术。

以下将详细探讨其定义、用法、应用场景、注意事项以及最佳实践。

定义与背景

javascript:void(0) 结合了 JavaScript 的 void 操作符和 HTML 中的 javascript: 伪协议。void 是 JavaScript 中的一个一元操作符，首次出现在 ECMAScript 1999（ECMA-262 3rd Edition）中，其作用是计算一个表达式但不返回任何值（即返回 undefined）。javascript: 伪协议允许在 <a> 标签的 href 属性中直接执行 JavaScript 代码。

因此，javascript:void(0) 的组合意味着：

执行 void(0)，即计算表达式 0 并返回 undefined。
由于返回值是 undefined，浏览器不会对页面进行任何操作（如跳转或加载新内容）。

这种用法在 Web 开发中历史悠久，尤其在早期的 JavaScript 应用中被广泛使用，以创建“死链接”（dead links），即点击后不执行任何导航操作的链接。

语法与用法

javascript:void(0) 的基本语法如下：

在 <a> 标签中使用：

<a href="javascript:void(0)" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >链接文本</a>

可以结合 onclick 事件触发 JavaScript 代码，例如：

<a href="javascript:void(0)" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  onclick="alert('Hello, World!')">点击我</a>

void 操作符的语法格式为：

void expression 或 void(expression)，其中 expression 是一个 JavaScript 表达式，圆括号是可选的，但建议使用以提高可读性。

在 javascript:void(0) 中，0 是一个简单的表达式，但可以替换为其他表达式，例如：

<a href="javascript:void(document.body.style.backgroundColor='green');" rel="external nofollow" >点击变绿</a>

点击后页面背景会变成绿色，但不会跳转。

应用场景

javascript:void(0) 的主要应用场景包括：

创建“死链接”：在 UI 设计中，有时需要一个看起来像链接但点击后不做任何事的元素。例如，在单页应用（SPA）中，某些链接可能只用于触发 JavaScript 事件，而非导航。
阻止默认链接行为：如果不指定 href，浏览器可能会将 <a> 标签视为指向当前页面的 #，点击后会跳到页面顶部（即 #top）。使用 javascript:void(0) 可以避免这种行为。
历史兼容性：在不支持现代 JavaScript 事件绑定的旧浏览器中，javascript:void(0) 是一种简单有效的解决方案。

以下是与常见替代方法的对比：

方法	描述	优缺点
javascript:void(0)	使用 void 操作符返回 undefined，阻止跳转	简单，历史兼容性好，但不推荐，易读性差
href="#" + onclick="return false"	使用 # 作为占位符，onclick 中阻止默认行为	更常见，但 # 会触发页面滚动到顶部，需要额外处理
href="#" + event.preventDefault()	使用事件对象阻止默认行为	现代做法，推荐使用，符合 Web 标准
addEventListener	使用 JavaScript 绑定点击事件，调用 preventDefault()	最现代，代码分离，维护性好，推荐用于复杂应用

示例代码

以下是一些示例代码，展示 javascript:void(0) 的使用场景：

基本用法（不做任何事）：

<a href="javascript:void(0)" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >点击我，什么也不会发生</a>

结合 onclick 触发 JavaScript：

<a href="javascript:void(0)" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  onclick="alert('Hello, World!')">点击我，弹出警示框</a>

替代方法（使用事件绑定）：

<a href="#" rel="external nofollow"  onclick="event.preventDefault(); alert('Hello, World!')">点击我，弹出警示框</a>

或使用 JavaScript：

document.getElementById('myLink').addEventListener('click', function(event) {
    event.preventDefault();
    alert('Hello, World!');
});

注意事项

浏览器支持：javascript:void(0) 在所有现代浏览器中都支持，包括 Chrome、Firefox、Safari、Edge 和 Opera。最早支持版本可以追溯到 Netscape Navigator 3.0（1996 年），因此兼容性非常好。
可访问性（Accessibility）：使用 javascript:void(0) 时，建议为链接添加 role="button" 或其他 ARIA 属性，以提高对屏幕阅读器的支持。
性能：在现代 Web 开发中，直接在 HTML 中嵌入 JavaScript 代码（如 onclick）可能会降低代码可维护性，推荐使用事件绑定分离逻辑。

最佳实践与争议

虽然 javascript:void(0) 历史悠久且广泛使用，但 MDN 和现代 Web 开发社区建议避免使用 javascript: 伪协议。理由包括：

代码分离：直接在 HTML 中嵌入 JavaScript 违反了代码分离原则，增加了维护难度。
安全性：在某些场景下，javascript: 协议可能被恶意利用，例如在用户输入中注入代码。
可读性：javascript:void(0) 的意图不如事件绑定明确，容易导致代码难以理解。

替代方法如 addEventListener 被认为是更现代和推荐的做法。例如：

const link = document.querySelector('a');
link.addEventListener('click', (event) => {
    event.preventDefault();
    // 执行 JavaScript 逻辑
});

然而，在一些遗留代码或简单页面中，javascript:void(0) 仍然可见，尤其是在不支持现代 JavaScript 的环境中。这导致了社区中关于其使用是否适当的讨论：

一些开发者认为，在简单场景下，javascript:void(0) 足够轻量且易用。
另一些开发者则强调现代标准，建议始终使用事件绑定以提高代码质量。

浏览器支持与历史

以下是部分浏览器的最低支持版本（数据来源于 MDN Web Docs）：

浏览器	最低支持版本
Chrome	1 (2008 年)
Firefox	1 (2004 年)
Safari	1 (2003 年)
Edge	12 (2015 年)
Opera	4 (1998 年)

在 2025 年 6 月，所有现代浏览器均完全支持 void 操作符，无需额外的 polyfill。

实践中的使用建议

对于新项目，优先使用 addEventListener 或其他事件绑定方法，保持代码分离和可维护性。
在需要快速原型设计或简单页面时，可以考虑 javascript:void(0)，但注意添加适当的 ARIA 属性以提高可访问性。
验证代码可读性，避免过度使用 javascript: 伪协议，尤其在团队协作中。

总结

javascript:void(0) 是一种历史悠久的 JavaScript 技巧，用于创建不触发页面跳转的链接。它利用 void 操作符返回 undefined，阻止浏览器执行默认行为。虽然在某些场景下仍然有用，但现代 Web 开发建议使用事件绑定（如 addEventListener）来替代，以符合最佳实践。开发者应根据项目需求和团队规范选择合适的方法。

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。