e.preventdefault() 不生效的常见原因及解决方法：绑定对象错误、未监听 submit 事件、异步调用、href="#" 滚动问题、移动端 touchstart 误用；应正确绑定目标元素、同步执行、用事件委托和 closest 等健壮匹配方式。
click 事件里 e.preventDefault() 不生效？先看绑定对象对不对
最常见的失效原因是：你监听的是父容器，但实际点击的是子元素（比如 <a></a> 里嵌了 <span></span> 或图标），而 event.target 是子节点，它本身没有默认跳转行为，自然调不着 preventDefault()。
正确做法是：要么直接给真正可点击的元素（如 <a></a>、<button></button>）绑事件；要么用事件委托，但必须在回调里确认目标是否匹配：
document.addEventListener('click', e => { if (e.target.matches('a[data-modal]')) { e.preventDefault(); } })- 别依赖
e.currentTarget.className判断——类名可能含空格、多个类，字符串比对极易出错 - 用
e.target.closest('a')比e.target.tagName === 'A'更健壮，能捕获嵌套结构里的链接
表单提交必须监听 submit 事件，不是 click
很多人给提交按钮加 click 监听并调 e.preventDefault()，结果页面照样刷新——因为表单的默认提交行为只在 submit 事件上存在，click 根本没这个语义。
实操要点：
- 监听对象必须是
<form></form>元素，不是按钮：form.addEventListener('submit', e => { e.preventDefault(); }) -
e.preventDefault()必须同步执行，不能包在fetch().then()或setTimeout里 - 动态插入的表单，用事件委托更稳妥：
document.addEventListener('submit', e => { if (e.target.matches('[data-ajax]')) e.preventDefault(); }) - 回车触发表单提交常被忽略，只监听按钮会漏掉这个路径
href="#" 点击后滚到顶部？preventDefault() 压根不管这事
# 触发的是锚点滚动，属于 CSS/布局层面行为，不是导航事件，preventDefault() 对它完全无效。
解决方法只有两个：
- 把
href改成javascript:void(0)或空字符串href=""（注意后者可能触发页面重载） - 或者用
scrollIntoView({ behavior: 'auto', block: 'nearest' })手动控制滚动，再e.preventDefault()阻止其他行为 - 千万别靠
return false——在现代原生 JS 中它只退出函数，不阻止默认行为
移动端 touchstart 里乱加 preventDefault() 会让页面卡死
iOS Safari 和部分安卓浏览器中，对 touchstart 或 touchmove 同步调 e.preventDefault() 会禁用原生滚动，用户一滑就卡住。
这不是 bug，是浏览器为手势优化做的限制：
- Chrome 90+ 强制 passive listener，默认不允许在
touchstart里调preventDefault()，会报 warning 并失效 - 真要拦截滚动，优先用 CSS：
touch-action: none，再配合 JS 手势库识别方向 - 如果非要用 JS，只在明确判断出是横向拖拽等非滚动意图时才调
e.preventDefault()，而不是无条件执行
复杂点在于：同一个事件监听器里，既要处理点击又要防误触滚动，得靠 e.touches 距离差或时间阈值做判断，不能一刀切。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
