What does “javascript:void(0)” mean?

技术背景

在网页开发中，<a> 标签通常用于创建超链接，其 href 属性指定链接的目标地址。当需要在点击链接时执行 JavaScript 代码而不进行页面跳转时，就会用到 javascript:void(0) 这样的写法。同时，void 运算符在 JavaScript 中也是一个重要的概念，它能对给定的表达式进行求值并返回 undefined。

实现步骤

1. 理解 void 运算符

void 运算符的语法是 void <expr>，它会计算 <expr> 表达式的值，但最终返回 undefined。例如：

function myVoid(expr) {
    return undefined;
}

2. 使用 javascript:void(0) 阻止页面跳转

在 <a> 标签的 href 属性中使用 javascript:void(0)，可以阻止链接默认的跳转行为。示例代码如下：

<a href="javascript:void(0);" onclick="var el = document.getElementById('foo');">Get element</a>

当点击这个链接时，不会发生页面跳转，而是执行 onclick 事件中的 JavaScript 代码。

3. 替代方案

• 使用 href="#" 并在 onclick 事件中返回 false：

<a href="#" onclick="return false;">hello</a>

• 使用 <button> 元素代替 <a> 标签：

<button type="button" onclick="callPrintFunction()">Print</button>

核心代码

使用 javascript:void(0) 执行 JavaScript 函数

<a href="javascript:void(0)" onclick="callPrintFunction()">Print</a>

使用 void 运算符检查 undefined

if (something === void 0) {
    doSomething();
}

最佳实践

• 避免使用 javascript: 伪 URL：在实际开发中，javascript: 伪 URL 会在用户进行如“书签链接”“在新标签页中打开链接”等操作时导致混乱或错误。
• 使用 <button> 元素：如果链接仅用于执行脚本，应使用 <button> 元素替代 <a> 标签，因为 <button> 元素本身就具备点击交互的语义，且能更好地处理键盘事件。
• 提供无 JavaScript 支持的备用方案：为了保证网站的兼容性，对于依赖 JavaScript 的操作，应提供一个不依赖 JavaScript 也能完成相同功能的链接。

常见问题

1. # 和 javascript:void(0); 的行为差异

# 会使页面滚动到顶部，而 javascript:void(0); 不会。在开发动态页面时，这一差异很重要，因为用户点击页面上的链接时通常不希望页面回到顶部。

2. href 属性的必要性

大多数浏览器要求 <a> 标签必须有 href 属性才能被正确解析为超链接。没有 href 属性时，鼠标悬停在链接文本上时，光标可能会显示为插入符号而不是指针。

3. Internet Explorer 6 的兼容性问题

在 Internet Explorer 6 中，没有 href 属性的 <a> 标签不会应用 a:hover 样式。因此，即使链接不需要跳转，也应该为 <a> 标签提供一个有效的 href 属性。