preventDefault() 必须同步执行、作用于正确事件、传入有效 event 对象；链接拦截应绑定原生 click 并首行调用；表单拦截须监听 form 的 submit 事件且首行调用；失效多因 event 未传入、异步调用或目标错误；勿混用 return false。
掌握 preventDefault() 的关键，不是记住语法，而是理解它“必须同步、必须在正确事件上、必须传入有效 event 对象”这三个硬约束。用错地方或时机，它就形同虚设。
链接跳转拦截：别再用 href="#" 或 javascript:void(0)
这些写法看似省事，实则埋下可访问性隐患和行为不可控风险。正确做法是：
- 给
<a></a>元素绑定原生click事件监听器，确保事件对象（如e）作为参数传入 - 在回调函数第一行立即调用
e.preventDefault()，之后再执行你的逻辑（比如路由跳转、弹窗、数据加载） - 避免内联写法（如
onclick="e.preventDefault()"），因为e不在作用域内，会报错
表单提交拦截：只监听 submit，且必须绑在 <form></form> 上
这是最容易出错的场景。常见错误是监听按钮的 click，但点击按钮本身不会阻止表单提交——浏览器只认 form 的 submit 事件：
- 用
document.querySelector('form').addEventListener('submit', e => { ... })绑定 -
e.preventDefault()必须出现在回调最开头，不能放在fetch或setTimeout里 - 这样能覆盖所有提交方式：点击按钮、回车提交、甚至 JS 调用
form.submit()（注意：后者不会触发 submit 事件，需另作处理）
常见失效原因：不是方法错了，是上下文不对
90% 的“不生效”问题都源于执行环境偏差：
- 事件对象是
undefined：箭头函数没写参数，或监听器漏传e - 异步中调用：比如
setTimeout(() => e.preventDefault(), 0)，此时默认行为早已完成 - 事件目标不对：点击了图标或文字，但监听器挂在父容器上，又没做事件委托或
e.target === this判断 - 框架干扰：React/Vue 中要用合成事件对象，不能直接依赖原生
event属性；Vue 模板里推荐用@submit.prevent修饰符，更简洁安全
别混淆 preventDefault 和 return false
在原生 JavaScript 中，return false 没有任何事件控制能力，它只是函数返回值：
-
e.preventDefault()只阻止默认行为（跳转、刷新、右键菜单等） -
e.stopPropagation()只阻止事件冒泡 - 若需两者都停，就分开写两行，语义清晰、调试方便
- jQuery 里
return false等价于两者合并，但原生环境请彻底放弃这个写法
