javascript:void(0) 本身不导致抖动,抖动源于错误的事件处理:onclick未返回false、addEventListener漏调e.preventDefault()、或混用协议与JS逻辑;现代推荐href="#" + e.preventDefault()并设passive: false,同时排查scroll-behavior: smooth等CSS干扰。

href="javascript:void(0)" 为什么还会抖动
根本不是 javascript:void(0) 本身导致抖动,而是你把它和错误的事件处理方式混用了。比如在 onclick 属性里写了逻辑,又没显式返回 false;或者绑了 addEventListener 却漏掉 e.preventDefault() —— 这时浏览器仍可能触发默认行为(尤其在 Safari/iOS 上),造成“闪一下再回弹”的抖动感。
用 javascript:void(0) 时必须避开的三个坑
它只是个协议值,不自动阻止任何事。是否抖动,取决于你后续怎么用这个链接:
- 别在
onclick里写逻辑却不返回false:<a href="javascript:void(0)" onclick="doSomething(); return false;">点我</a>才安全;只写onclick="doSomething();"就可能抖 - 用
addEventListener时,e.preventDefault()必须放在第一行,且监听器不能绑在父级委托上却错判event.target - 不要在
javascript:void(0)后面拼接实际 JS 代码,例如href="javascript:void(0);doSomething()"—— 这会破坏协议语义,部分旧版 IE 可能执行失败或触发跳转
比 javascript:void(0) 更稳的现代写法
如果你控制得了 JS 初始化时机,直接换掉 href 值更可靠:
-
href="#"+e.preventDefault():前提是绑定监听时传{ passive: false },否则移动端可能忽略阻止 -
href="#void"或href="###":只要 DOM 里真没有id="void"或id="###"的元素,就不会滚动;但 URL 栏会变丑,且需人工保证 id 不冲突 - 彻底移除
href?不行 ——a标签会失去可聚焦、可键盘操作、屏幕阅读器识别等基本能力,必须保留一个合法值
真正容易被忽略的细节
抖动往往发生在长页面 + 滚动中点击时,而问题根源常藏在 CSS 或布局层:比如 html 或 body 设置了 scroll-behavior: smooth,配合 href="#" 触发强制平滑滚动;又或者父容器有 overflow-anchor: auto 干扰了滚动锚点计算。这时候光改 href 值没用,得同步检查滚动相关样式。



















