最常见的使用场景是点击标签时弹窗、发请求或触发路由；关键是在click事件回调中同步执行e.preventDefault()，且绑定对象须为被点击元素或其祖先。
链接点击后不跳转，只执行 JS 逻辑
最常见的使用场景：点击 标签时不想导航，而是弹窗、发请求或触发路由。关键不是“加了 preventDefault()”，而是它必须在 click 事件回调中同步执行，且绑定对象得是真正被点击的元素（或其祖先）。
容易踩的坑：
- 用内联
onclick="someFn()"却没传event参数，preventDefault()根本调不了 - 监听了按钮的
click，但实际点击的是里面或图标，event.target不是你预期的 - 写了
return false，但在原生 JS 中这不会阻止默认行为，只是退出函数
正确做法示例：
document.querySelector('a[data-action="modal"]').addEventListener('click', (e) => {
e.preventDefault();
showModal(e.currentTarget.dataset.id);
});
表单提交时不刷新页面，改用 fetch 提交
表单默认会收集数据、发送请求、刷新整个页面——这在 SPA 或需要校验的场景下完全不可接受。preventDefault() 必须作用于 submit 事件，且绑定在 元素上，不是按钮。
为什么监听按钮 click 无效？因为浏览器的“提交默认行为”只在 submit 事件触发时才存在，click 本身没有这个语义。
实操要点：
- 确保
event.preventDefault()是回调函数的第一行，不能包在setTimeout、fetch().then()里 - 动态插入的表单要用事件委托：
document.addEventListener('submit', e => { if (e.target.matches('form[data-ajax]')) e.preventDefault(); }) - 提交按钮建议设为
type="button"，避免用户按回车意外触发表单提交
移动端 touchmove 中禁用滚动却导致页面卡死
在 iOS Safari 和新版 Chrome 中，对 touchstart 或 touchmove 直接调 preventDefault() 是高危操作：它会禁用后续的 click 事件，还可能让页面失去原生滚动能力。
这不是 bug，是浏览器为优化触摸响应做的限制。除非你在做拖拽、手势识别等强交互，否则别碰。
更稳妥的替代方案：
- 优先用 CSS：
touch-action: none（配合 JS 手势库识别方向后再决定是否拦截） - 真要 JS 拦截，必须加
{ passive: false }参数：el.addEventListener('touchmove', e => { e.preventDefault(); }, { passive: false }) - 不要无条件调用；只在明确判定为横向滑动、缩放等场景下才执行
框架中（React/Vue）合成事件里 preventDefault 失效
React 和 Vue 的事件对象是合成的（SyntheticEvent），不是原生 Event 实例。虽然它们也提供 preventDefault() 方法，但内部实现依赖框架透出的原生事件。如果事件处理函数写成异步、或在组件卸载后才执行，preventDefault() 就像没写一样。
典型失效点：
- 在 React 中写
onClick={() => setTimeout(() => e.preventDefault(), 0)}—— 异步调用无效 - Vue 模板中用
@submit.prevent是语法糖，但如果手写addEventListener绑定到真实 DOM，就绕过了 Vue 的事件系统，e.preventDefault()可能被忽略 - 事件委托到 document 后，再通过
e.target判断是否为 form，但框架可能已重写事件冒泡路径
最保险的做法：始终用框架推荐的事件绑定方式（如 React 的 onSubmit、Vue 的 @submit.prevent），而不是混用原生 API。
真正复杂的地方不在语法，而在于你得判断「这个默认行为是不是浏览器真的会执行」——比如空格键滚屏、回车触发表单、iOS 上 touchmove 锁死滚动，这些都不是靠加一行 preventDefault() 就能解决的，得结合事件类型、绑定位置、执行时机和运行环境一起看。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
