ZH
RU
EN
ES
FR
DE
PT
AR
HI
# 或 javascript:void(0)：JavaScript 链接该如何选择？完整解释与代码示例
开发者朋友们，大家好！如果你曾编写过不跳转新页面、而是执行 JavaScript 代码的链接（例如打开模态窗口、加载内容或触发动画），你很可能面临过这个两难选择：该用哪个 href 属性值？ href="#" 还是 href="javascript:void(0)"？
这个问题在 Stack Overflow 上热度极高（浏览量过万！），并且确实值得探讨。这看似是一个小细节，却会影响页面的行为：是否会滚动到顶部、URL 中是否会出现哈希值、在旧版浏览器中能否正常工作？让我们一劳永逸地弄清楚哪种方法更好，以及为什么"正确"答案并不那么简单。
问题所在：为什么要修改 href？
想象一下：你正在编写一个打开菜单的按钮：
<a href="#" onclick="openMenu(); return false;">Menu</a>或者这样：
<a href="javascript:void(0)" onclick="openMenu();">Menu</a>两种方式都能"工作"，但各自都有意想不到的问题。让我们通过关键标准进行比较。
选项 1：href="#" —— 经典但暗藏陷阱
# 是一个指向页面"顶部"的链接。如果你直接写 <a href="#">，浏览器会将页面滚动到顶部。要避免这种情况，需要在事件处理器中添加 return false;：
<a href="#" onclick="doSomething(); return false;">Click me</a>优点：
- 可访问性：链接仍然可以获得焦点（可通过 Tab 键导航到）。
- 语义化：对于屏幕阅读器来说，它仍然是一个链接（即使它不会跳转到任何地方）。
- 简单性：易于记忆，编写快速。
缺点：
- 滚动到顶部：如果忘记添加
return false，用户将失去当前浏览位置。 - URL 变化：会在地址栏中添加
#（有时这是不希望发生的）。 - 浏览器历史记录：会创建一条历史记录（点击"返回"按钮会回到上一个"#"页面）。
选项 2：href="javascript:void(0)" —— 来自旧时代的技巧
javascript:void(0) 是一个 JavaScript 伪协议。它告诉浏览器："执行 void(0) 这段代码，并且不要跳转链接。" void(0) 返回 undefined，因此页面不会移动。
<a href="javascript:void(0)" onclick="doSomething();">Click me</a>优点：
- 不会滚动页面 —— 不需要
return false。 - 不会更改 URL —— 不会添加哈希值。
缺点：
- 可访问性问题：某些旧版屏幕阅读器在遇到 href 中的
javascript:时可能会"出错"。 - 违反渐进增强原则：如果用户禁用了 JavaScript，链接将不起作用（不会跳转到任何地方）。
- 无效的 HTML？ 从形式上说，
javascript:是非标准协议，但浏览器能理解。然而，W3C 验证器可能会报错。 - 调试更困难：如果 href 中出现错误，浏览器可能会表现出不可预测的行为。
对比表格
| 标准 | href="#"
|
|---|
