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;">菜单</a>或者这样：
<a href="javascript:void(0)" onclick="openMenu();">菜单</a>两种方式都“有效”，但每种都隐藏着意外。让我们根据关键标准来比较它们。
方案 1：href="#" —— 带有陷阱的经典方法
# 是指向页面“顶部”的链接。如果你只写 <a href="#">，浏览器会将页面滚动到顶部。为了避免这种情况，你需要在事件处理程序中添加 return false;：
<a href="#" onclick="doSomething(); return false;">点击我</a>优点：
- 可访问性：链接保持可聚焦（可以通过 Tab 键切换）。
- 语义：对于屏幕阅读器来说，它仍然是一个链接（尽管不指向任何地方）。
- 简单性：易于记忆，书写快速。
缺点：
- 向上滚动：如果忘记
return false，用户将丢失滚动位置。 - URL 更改：地址栏中会添加
#（有时这是不希望的）。 - 浏览器历史记录：会在历史记录中创建一条记录（“后退”按钮将导航到上一个“#”页面）。
方案 2：href="javascript:void(0)" —— 旧时代的 hack
javascript:void(0) 是一个 JavaScript 伪协议。它告诉浏览器：“执行 void(0) 代码，不要导航到链接”。void(0) 返回 undefined，因此页面不会移动。
<a href="javascript:void(0)" onclick="doSomething();">点击我</a>优点：
- 不滚动页面 —— 不需要任何
return false。 - 不更改 URL —— 不添加哈希值。
缺点：
- 可访问性问题：一些旧的屏幕阅读器可能会在 href 中的
javascript:上“卡住”。 - 违反渐进增强原则：如果用户禁用了 JavaScript，链接将不起作用（指向空白）。
- 无效的 HTML？ 形式上，
javascript:是一个非标准协议，但浏览器理解它。然而，W3C 验证器可能会报错。 - 调试更困难：如果 href 中有错误，浏览器可能会表现异常。
表格对比
| 标准 | href="#"
|
|---|
