javascript:void(0)是什么意思,javascript:void(0) 含义

题图来自Unsplash，基于CC0协议

导读

javascript:void(0) 是 JavaScript 中的一个语法结构，它由三部分组成：javascript: 协议、void 关键字和参数 0。

解释一下含义和作用：

• void [Expression]: 这是 ECMAScript 规范中的一个严格操作符 (strict operator)。当你对一个表达式应用 void 操作符时，它会计算该表达式，并强制结果（不管是什么类型）变为 undefined，并返回这个 undefined 值。语法是 void exp;。
• void(0): 将 void 操作符的作用应用到了数字 0 上。由于 0 是一个常量，它无副作用，所以 void(0) 的结果就是 undefined，并且其主要目的就是返回 undefined，或者指示一个无任何返回值的操作。本身 void(0) 就只是一个值为 undefined 的表达式。

所以 javascript:void(0) 的核心意义是：指定了一个协议为 javascript: (这是一个用于在 href 或 on* 事件处理程序中直接嵌入 JavaScript 代码的浏览器协议，尽管现代用法推荐使用 onclick 等事件处理程序) 的锚点链接 (通常是 <a> 标签)，并确保链接的目标表达式是 void(0)。

void(0) 在 JavaScript 中的作用

1. 阻止默认行为，并阻止页面跳转: 这是 javascript:void(0) 最常见的作用。它通常用在 HTML 的 <a> 标签的 href 属性上，目的是让这个标签成为一个纯粹的 JavaScript 事件触发器，而不执行任何页面导航（比如跳转到页面顶部，也就是默认的锚点行为）。

   • 示例 <a href="javascript:void(0)">点击我，我什么都不会做（除了可能滚动到顶部，但 void(0) 阻止了）</a>
   • 示例 <a href="javascript:void(0)" onclick="doSomething()"> 点击触发事件 </a>

   通过将 href 设置为 javascript:void(0)，你告诉浏览器，这个链接的目标不是普通页面，也不是另一个锚点，而导致默认的“点链接后页面滚动到锚点”行为不会发生。同时，它允许开发者在 onclick 或其他事件处理程序中附加任何 JavaScript 代码。

a 标签 href javascript:void(0) 用法

将 javascript:void(0) 用在 <a> 标签的 href 属性中，主要场景就是创建能够被单击以触发 JavaScript 动作，但又不希望浏览器发生任何页面加载或跳转（滚动到页面顶部）行为 的热区。

• 出于习惯，用于一些只需要执行操作而不需要页面跳转的链接按钮，因为它看起来像链接。
• 防止表单默认提交行为（尽管更推荐使用 form 的 onsubmit 事件和 event.preventDefault()）。
• 在某些情况下，作为 onclick 事件处理的备选，尤其是在需要严格阻止默认行为的场景。但是，现代 HTML 和 JavaScript 规范更推荐使用 button 元素或 <a> 标签的 role 属性（例如 role="button"），或者更明确地使用事件处理程序来阻止默认行为（如 event.preventDefault()）来实现交互，因为 javascript:void(0) 和 javascript: 在一些老旧浏览器或开发实践中被认为是不安全或低效的。

最佳实践：如果不是明确需要创建一个链接（用于页面导航或锚点跳转），那么使用 javascript:void(0) 作为 href 是不推荐的。优先考虑使用语义化的 button 或确保事件处理程序中的事件对象被正确处理，调用 preventDefault()。

javascript:void(0) 与 # 区别

javascript:void(0) 和 #（锚点 #）都常常用于 href 属性，但它们的行为和含义不同：

1. href="#":

   • 在 HTML5 中，它表示“无意点击无意义”，通常是有效的，现代浏览器可能会将其视为无效链接，但默认行为通常是不应导致页面跳转，阻止浏览器默认的页面顶部滚动行为。点击后地址栏会显示 #。
   • 在旧版 IE 中，可能会模拟冒泡效果，引发所有祖先元素的默认行为（可能触发 body 的 onmousedown 等）。这是需要注意的兼容性老问题。
   • 有时也被滥用为一个空操作点。

2. href="javascript:void(0)":

   • 明确指定了协议为 javascript:，并执行 void(0) 表达式，以阻止默认行为。
   • 在旧版 IE 中，行为与 href="#" 相似，可能导致一些事件冒泡问题。
   • 规范中不属于链接。

使用 # 或 javascript:void(0) 的一个重要区别：

在浏览器早期（尤其是旧版 Internet Explorer），当事件冒泡发生在 body 上且没有被阻止时，#（href="#"）有时会被正确处理，而 javascript:void(0) 则能更肯定地阻止默认行为并避免某些 IE 下的冒泡事件问题。不过，这些浏览器兼容性问题在现代开发中已不再重要。

为什么用 javascript:void(0)

尽管 javascript:void(0) 是一个老式/一些开发者的习惯用法，理解其“为什么”很重要：

1. 阻止页面重定向：最核心的原因。当你需要在文档内响应一个链接点击（例如，触发一个警报、打开模态框、提交数据等），但不希望浏览器加载新页面或滚动到页面顶部时，它是有效的。
2. 保持 URL 简单：不像访问内部页面 URL 那样对 URL 历史记录造成影响。点击 javascript:void(0) 链接，页面不会前进/后退。
3. 早期开发习惯/共识：在 addEventListener 和 event.preventDefault() 曾不被广泛了解或使用的年代，尝试用 javascript:void(0) 结合 onclick 是一类常见的阻止默认行为的方法，形成了一个比较公认的习惯用法（虽然这个习惯用法本身存在上述争议）。

然而，要记住：

• 现代前端有很大一部分情况不需要链接，void(0) 相对老旧。
• 更可靠的阻止默认行为是事件处理层的 event.preventDefault()。
• 使用 javascript:void(0) 的 href 并不能直接阻止其他在元素上冒泡的默认事件。

因此，虽然了解 javascript:void(0) 是好的，但优先考虑推荐的当代做法（语义化的 HTML 元素、明确阻止默认事件）通常是最好的。