下面给你 《javascript:void(0) 用法及常见问题解析》完整版（可直接当成文章使用），包含示例、图示说明点以及常见错误解决方案。

📌 javascript:void(0) 用法及常见问题解析

这是前端开发中非常常见却经常被误解的语法，尤其常用于 超链接、按钮、事件阻断 等场景。

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

javascript:void(0) 是一个 JavaScript 表达式：

• javascript: → 表示在超链接中执行 JS 代码
• void(0) → 执行表达式并返回 undefined（无返回值）

👉 简单说：
它让一个链接执行 JavaScript，但不会跳转，也不会刷新页面。

🎯 二、为什么需要 void(0)？

HTML 的 <a> 标签默认会跳转页面，而有些时候我们只想让它：

• 执行一个 JavaScript 事件
• 不跳转页面
• 不刷新
• 不改变 URL

这时候就会用到：

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

🟦 三、javascript:void(0) 的常见使用场景

✅ 1. 阻止超链接跳转

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

✅ 2. 点击执行 JS，不刷新页面

<a href="javascript:void(0)" onclick="alert('Hello!')">
    点击弹出提示，但页面不跳转
</a>

✅ 3. 作为前端框架的“占位链接”

常见于：

✔ 导航栏占位
✔ Tab 切换
✔ 菜单展开/收起

示例：

<li><a href="javascript:void(0)" onclick="toggleMenu()">菜单</a></li>

✅ 4. 阻止默认事件（旧写法）

过去常用：

<a href="javascript:void(0)" onclick="return false;">按钮</a>

现更推荐：

<a href="#" onclick="event.preventDefault()">按钮</a>

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

👉 想要完全不跳、不刷新、不改变 URL → 用 javascript:void(0) 更稳。

🟥 五、javascript:void(0) 的常见错误与解决方案

❌ 错误 1：点击没反应

常见原因：JavaScript 被浏览器禁用
解决：不要把逻辑放在 href 内，而是放在 onclick 或外部 JS。

❌ 错误 2：无法触发 Vue / React 事件

因为 Vue/React 会阻止 inline JS，所以写成：

<a href="javascript:void(0)" @click="doSomething">

✔ 正常
但不推荐放 JS 在 href 中。

❌ 错误 3：SEO 不友好

Google 不喜欢 JS 链接。

解决：请使用：

<button type="button">操作</button>

或

<a href="#" onclick="event.preventDefault()">操作</a>

🟩 六、推荐的现代写法（代替 javascript:void(0)）

在现代前端（Vue / React / 原生 JS），推荐：

✔ 方法 1：href="#" + event.preventDefault()

<a href="#" onclick="event.preventDefault()">按钮</a>

✔ 方法 2：直接使用 <button>

最标准：

<button onclick="openDialog()">打开对话框</button>

✔ 方法 3：配合 JS 事件绑定

<a href="#" id="open">打开</a>

<script>
document.getElementById('open').addEventListener('click', function(e) {
    e.preventDefault();
    console.log('Clicked!');
});
</script>

🟦 七、总结（重点 20 字）

javascript:void(0) 用于阻止链接跳转，只执行 JS，不刷新页面。