preventdefault不生效的主因是事件未绑定到真实触发目标、submit事件绑错元素或异步调用，需检查绑定对象、事件类型、执行时机及框架合成事件机制。
click 事件里 preventDefault 不生效？检查是否绑错了元素
最常见的原因是事件没真正绑定到触发目标上——比如给 <button></button> 写了 onclick，但实际点击的是它里面的 <span></span> 或图标，而那个子元素没传事件上来。
解决办法很简单：用事件委托或确保监听器挂载在最外层可点击容器上；更稳妥的是直接在回调里加 event.stopPropagation() 防止冒泡干扰，再调用 event.preventDefault()。
- 确认
event.target是你预期的元素，不是它的子节点 - 如果用了
addEventListener，别漏掉第三个参数：{ capture: false }（默认）通常够用，但深层嵌套时可能需要捕获阶段提前拦截 -
<a href="#"></a>这种链接最容易被忽略：即使加了preventDefault，若 JS 报错或执行晚于跳转，页面仍会刷新
表单提交时 preventDefault 失效？重点看 submit 事件绑定时机
submit 事件必须绑定在 <form></form> 元素上，而不是按钮。很多人误把 click 绑在 <input type="submit"> 上，结果表单照样提交——因为 click 不会阻止表单默认行为，只有 submit 事件才可以。
另外，如果表单有多个提交方式（比如回车、按钮、JS 触发），只监听按钮 click 会漏掉其他路径。
- 统一监听
form.addEventListener('submit', e => { e.preventDefault(); ... }) - 避免在
submit回调里写异步逻辑（如fetch）后才调用preventDefault——它必须同步执行 - 若用框架（React/Vue），注意合成事件机制：React 中需显式调用
e.preventDefault()，且不能依赖原生event的属性
移动端 touchstart 也能用 preventDefault？小心滚动卡死
在 iOS Safari 和部分安卓浏览器中，对 touchstart 或 touchmove 调用 preventDefault 会禁用原生滚动，导致页面“变重”甚至无法滑动。
这不是 bug，是浏览器为优化触摸响应做的限制。除非你是在做自定义拖拽、手势识别等强交互场景，否则不要随便在这些事件里加 preventDefault。
- 真要阻止默认滚动，优先用 CSS：
touch-action: none（配合 JS 手势库更安全） - 如果必须用 JS，只在明确需要拦截的时刻调用，比如判断出是横向滑动才
e.preventDefault()，而非无条件执行 - Chrome 从 90+ 开始对 passive event listener 做了强制要求：
touchstart默认是 passive，此时再调preventDefault会报 warning 并失效
为什么 e.preventDefault() 有时像没起作用？查这三件事
不是代码写错了，往往是上下文干扰。最常被忽略的是：事件是否真的触发了、是否被其他代码覆盖、是否在错误的生命周期调用。
- 加个
console.log('here')确认回调进了没——很多情况是 selector 写错或 DOM 没加载完就绑事件 - 检查是否有多个
addEventListener，后绑定的监听器可能覆盖了前一个的preventDefault - 某些 UI 库（如 Bootstrap Modal）内部会重新 dispatch 事件，原始 event 对象已失效，此时
e.preventDefault()对新事件无效
真正难调试的，往往不是语法问题，而是事件流和执行时序没理清。多打几个 console.log(e.type, e.target)，比翻文档更快定位问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
