href="javascript:void(0)" 是为阻止 <a> 标签默认跳转和滚动,通过 javascript: 伪协议执行 void(0) 返回 undefined 实现静默点击,虽比 href="#" 避免页面顶部滚动,但违背语义、损害可访问性与 SEO,现代开发应优先使用 event.preventDefault() 或改用 <button>。

href="javascript:void(0)" 是为了阻止默认跳转,但不是最佳实践
它确实能防止 a 标签点击后跳转或滚动到顶部,但本质是用一个“合法但无意义”的 URL 伪装成可点击链接。浏览器看到 javascript: 伪协议,就执行后面的 void(0)(返回 undefined),不导航、不刷新、不记录历史 —— 表面看“什么都没发生”。
但它掩盖了语义问题:这个元素本不是链接,却用了链接标签;可访问性、SEO、键盘焦点行为都受影响。
为什么比 href="#" 更“稳”一点
href="#" 会触发页面滚动到顶部(因为 # 默认锚点指向文档开头),尤其在长页面中很突兀;而 javascript:void(0) 不触发任何位置变更,视觉上更“静默”。
-
href="#"→ 触发scrollTo(0, 0),可能伴随页面闪烁 -
href="javascript:void(0)"→ 执行空操作,无滚动、无 history push -
href="####"或href="#nonsense"→ 仍可能触发无效锚点匹配,部分浏览器仍微滚动
现代项目里更推荐用 preventDefault()
直接写 href="javascript:void(0)" 已被主流框架和 Linter(如 ESLint 的 no-script-url 规则)警告,因为它混用了 HTML 和 JS 逻辑,且无法被静态分析工具识别意图。
立即学习“Java免费学习笔记(深入)”;
真正可控的做法是:
- 保留语义清晰的
href="#"或href="/"(哪怕只是占位) - 在
click事件处理器中调用e.preventDefault() - 如果不需要链接语义,改用
button标签(更准确,天然支持键盘交互与 aria)
例如:
<a href="#" id="submit-btn">提交</a>
JS 中:
document.getElementById('submit-btn').addEventListener('click', e => {<br> e.preventDefault();<br> // 自定义逻辑<br>});
容易被忽略的兼容性与维护风险
旧版 IE 对 javascript: 伪协议有额外限制(比如不支持在某些 CSP 策略下执行),而 preventDefault() 是标准 DOM API,兼容性更好;更重要的是,当团队多人协作时,javascript:void(0) 往往意味着“这里有个 click 事件但找不到绑定位置”,导致调试困难 —— 事件监听器可能分散在 JS 文件各处,甚至被动态移除。
真正需要关注的不是“怎么让它不跳”,而是“它到底该不该是 a 标签”。



















