下面给你一篇可直接使用的 《javascript:void(0) 用法及常见问题解析｜JavaScript 日常处理指南》，讲解清晰、含实例，非常适合学习或发布文章。

javascript:void(0) 用法及常见问题解析（JavaScript 日常处理）

在前端开发或浏览网页时，你经常会看到类似这样的链接：

<a href="javascript:void(0)">点击这里</a>

它看起来像一个链接，但点了不会跳转，也不会刷新页面。
到底 javascript:void(0) 是什么？有什么用？什么时候该用、什么时候不该用？
本篇一次讲清楚。

一、什么是 javascript:void(0)？

这是 JavaScript 语法：

• javascript: 表示这是一个 JavaScript 代码片段
• void(0) 表示执行表达式但 不返回任何值

所以：

javascript:void(0)

意思是：

👉 执行一个空操作，并且返回值为 undefined，不会导致页面跳转

本质上是一个“空链接”，常用于需要绑定点击事件又不想跳页面时。

二、为什么 a 标签要用 javascript:void(0)？

因为 <a> 标签默认行为是跳转。
如果我们只是想让它“看起来像按钮”，但不跳转，则需要阻止默认行为。

示例：

<a href="javascript:void(0)">点击不跳转</a>

点了后不会：

• 刷新页面
• 跳转 URL
• 改变地址栏
• 回到顶部

三、javascript:void(0) 的常见用途

✔ 1. 防止 a 标签跳转

<a href="javascript:void(0)" onclick="showDialog()">打开弹窗</a>

点击后：

• 阻止跳转
• 执行 showDialog()

✔ 2. 作为占位符链接（未来再替换）

常用于导航栏还没做好的情况：

<a href="javascript:void(0)">即将上线</a>

✔ 3. 配合 JS 框架，生成虚拟按钮

在 Vue/React 出现早期，常用此方法让 a 标签变成可点击控件。

四、javascript:void(0) 与 javascript:; 的区别

关键区别：

• javascript:void(0) 更清晰：明确表示返回空值
• javascript:; 不易阅读，看上去像错误语法

👉 现代前端更推荐 void(0)

五、javascript:void(0) 替代方案（更推荐）

在现代前端里，不建议再使用 javascript:void(0)，因为：

• 会让 HTML 和 JS 混在一起，不够语义化
• 可访问性差
• SEO 不友好
• 不是最佳实践

目前最佳写法：

✔ 1. 使用按钮元素

<button type="button" onclick="doSomething()">按钮</button>

语义更标准。

✔ 2. 使用 a + preventDefault()

<a href="#" onclick="event.preventDefault(); doSomething();">点击</a>

✔ 3. 使用 CSS 伪类

<a href="#" role="button">按钮</a>

六、javascript:void(0) 的常见问题解析

❌ 1. 点链接后变成 javascript:void(0) 出现在地址栏

说明浏览器强制把 href 当成 URL 尝试跳转，这是不推荐使用 javascript: 的原因。

❌ 2. 移动端兼容问题

某些 WebView 不允许使用 javascript: 前缀，会直接拦截。

解决：使用按钮或 addEventListener。

❌ 3. SEO 影响

Google 等搜索引擎不喜欢 javascript: 链接，抓不到内容。

❌ 4. 与 CSP（内容安全策略）冲突

开启 CSP 的网站可能会直接禁止 javascript: 执行。

七、总结（收藏）