e.preventDefault() 有时无效的主因是事件未绑定到真正触发目标：如监听却点击其子元素，或在表单中误监听click而非submit；href="#"会触发锚点滚动且preventDefault无法阻止；古董浏览器需兼容e.returnValue=false；框架中修饰符须直接作用于标签本身。
为什么 e.preventDefault() 有时没用？
最常见的情况是：事件根本没绑定到真正被点击的元素上。比如 <a></a> 里嵌了 <span></span> 或图标，你监听的是 <a></a>，但 event.target 实际是子元素——而子元素没有 href，自然不触发跳转，也无需阻止；但你以为绑对了，结果点击后还是跳走了。
另一个高频坑：在 submit 场景下误监听 click 而非 submit。表单提交的默认行为只能由 submit 事件的 preventDefault() 阻止，click 在 <button type="submit"></button> 上调用 preventDefault() 是无效的。
- 用
console.log(event.target)确认实际触发目标 - 优先监听
<a></a>自身，避免依赖事件冒泡 - 若必须委托，确保父容器不拦截或吞掉事件
href="#" + preventDefault() 仍会滚到顶部？
是的，而且这是浏览器标准行为：# 触发锚点定位，不属于“导航”范畴，preventDefault() 对它无效。页面会瞬间跳回顶部，哪怕 JS 执行成功。
这不是 bug，是规范定义的行为。想彻底避免滚动，有且只有两个干净解法：
立即学习“前端免费学习笔记（深入）”；
- 改用
href="javascript:void(0)"—— 无语义、无副作用，老但稳 - 直接移除
href属性，再用 CSS 补回链接样式（如cursor: pointer; text-decoration: underline;）
别碰 href="#some-id" 后再靠 JS 拦——只要 ID 存在，滚动就发生，preventDefault() 来不及。
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
兼容性：IE8 及更老浏览器怎么写？
现代写法 e.preventDefault() 在 IE9+ 有效；IE6–8 只认 e.returnValue = false。如果项目还需支持这些古董，得兜底：
link.addEventListener('click', function(e) {
if (e.preventDefault) {
e.preventDefault();
} else {
e.returnValue = false;
}
});
或者更简单粗暴：直接在内联 onclick 里写 return false，它同时干掉默认行为和冒泡，兼容性完美，但不够灵活。
Vue/React 里 @click.prevent 失效怎么办？
框架修饰符失效，大概率是事件没落在原生 <a></a> 上。比如你写了：
<div @click.prevent> <a href="/home">首页</a> </div>
这不行——@click.prevent 绑在 <div> 上，但跳转由 <code><a></a> 的原生行为触发，框架修饰符拦不住。
正确做法只有一条：修饰符必须作用于带 href 的 <a></a> 标签本身：
<a href="/home" @click.prevent="handleClick">首页</a>
React 同理，必须 <a href="#" onclick="{(e)"> { e.preventDefault(); ... }}></a>，不能套在父容器上。
真正容易被忽略的是可访问性：用 href="javascript:void(0)" 或删 href 后，屏幕阅读器可能无法识别这是可交互元素。如果它承载功能（比如展开菜单），请补上 role="button" 和 tabindex="0"。
