javascript:void(0)

javascript:void(0) 是 前端里非常常见但容易被误解的一种写法，下面用一句话 + 场景 + 替代方案给你讲清楚 👇

一句话解释

javascript:void(0) 的作用是：执行 JavaScript，但什么也不返回，页面不会跳转。

拆开来看

void(0)

• void：JavaScript 运算符
• void(0)：返回 undefined
• javascript:：浏览器把后面的内容当 JS 执行

所以：

<a href="javascript:void(0)">点我</a>

👉 点击后：

• 不跳转页面
• 不刷新
• 不改变 URL
• 只是执行 JS（如果有）

常见使用场景

1️⃣ 阻止 a 标签跳转

<a href="javascript:void(0)">按钮</a>

2️⃣ 配合点击事件

<a href="javascript:void(0)" onclick="doSomething()">点击</a>

为什么有人用它？

因为：

• href="#" 会跳到页面顶部 ❌
• javascript:void(0) 不会产生任何副作用 ✅

⚠️ 不推荐的原因（重点）

❌ 可读性差

href="javascript:void(0)"

❌ 不利于 SEO

• 搜索引擎无法理解这是可交互元素

❌ 可访问性差

• 键盘 / 屏幕阅读器支持不好

✅ 推荐的现代写法（替代方案）

✅ 1️⃣ 用 button（最推荐）

<button onclick="doSomething()">点击</button>

✅ 2️⃣ 用 a + 阻止默认事件

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

或更规范：

<a href="#" id="btn">点击</a>

<script>
document.getElementById("btn").addEventListener("click", function (e) {
  e.preventDefault();
  doSomething();
});
</script>

✅ 3️⃣ href 留真实地址（SEO 友好）

<a href="/action" data-action="doSomething">点击</a>

总结对比

一句话结论

javascript:void(0) 是老写法，能用但不该再用，现代前端应该用 button 或 preventDefault()。

如果你是在维护老项目、写教程、或者做 SEO 优化，我可以帮你把项目里所有 javascript:void(0) 安全替换掉。