调用 event.preventDefault() 可阻止浏览器默认行为，需在事件处理函数中同步执行且确保 event 对象有效；它不阻止冒泡，仅对有默认行为的事件（如 submit、click、keydown）生效。
事件触发后页面跳转或表单提交了，怎么阻止？
直接调用 event.preventDefault() 就能阻止浏览器默认行为，比如点击 <a> 标签跳转、表单自动提交、空格键滚动页面等。它不阻止事件冒泡，只管“别按浏览器本来想做的干”。
常见错误是：没传入事件参数，或者在异步回调里调用（比如 setTimeout 中），这时 event 已失效，preventDefault 不起作用。
- 必须在事件处理函数中同步调用，且确保
event对象有效 - 箭头函数里若需
this或事件对象，推荐显式传参，避免隐式绑定丢失 - 对键盘事件（如
keydown）阻止空格/回车默认行为时，注意部分浏览器要求事件监听器是「捕获阶段」或绑定在document才可靠
addEventListener 里怎么正确写 preventDefault？
最稳妥的方式是把事件对象作为参数传进回调，并在第一行就调用 preventDefault() —— 尤其当逻辑可能被短路（比如条件提前 return）时，靠前调用更安全。
document.querySelector('form').addEventListener('submit', function (e) {
e.preventDefault(); // 必须放这里，别等验证完再调
if (!validateForm()) return;
submitToServer();
});
- 不要写成
onclick="handleClick()"再在函数里取event（依赖全局event变量，在现代浏览器中不可靠） - 使用
addEventListener时，事件对象始终是回调第一个参数，名称可自定义（如evt、e），但必须接收 - 如果同时要阻止冒泡，得额外加
e.stopPropagation()，preventDefault不附带这个效果
为什么调用了 preventDefault 却没生效？
最常见的原因是事件类型不匹配或监听时机不对。例如给 div 绑定 click 并调用 preventDefault，它本身就没有默认行为，自然“没反应”；又或者监听的是 mousedown，但真正触发默认行为的是后续的 click，此时阻止前者无效。
立即学习“Java免费学习笔记（深入）”；
-
preventDefault只对**有默认行为的事件类型**起作用：如submit、click（对<a>）、keydown（对空格/回车）、contextmenu - 某些行为由多个事件协同完成（如拖拽），仅阻止其中一个事件无法中断整个流程
- 移动端
touchstart上调用preventDefault可能影响后续click触发，需谨慎评估交互预期
Vue/React 里还要手动调 preventDefault 吗？
要。框架封装的事件处理器（如 Vue 的 @click.prevent、React 的 onClick）只是语法糖，底层仍是原生事件。即便用了修饰符，遇到自定义逻辑或动态绑定时，仍可能需要手动干预。
// React 中常见写法
function handleSubmit(e) {
e.preventDefault(); // 依然需要
api.post('/login', formData);
}
- Vue 的
.prevent修饰符本质就是自动调e.preventDefault()，但只适用于模板中声明的事件，JS 逻辑里还得自己写 - React 函数组件中，合成事件对象
e是池化复用的，若需异步使用，必须先调e.persist()（v17+ 已废弃池化，但旧项目仍需留意） - 框架不会帮你判断“该不该阻止”，比如表单校验失败时才阻止提交——这部分逻辑始终由你控制
button 的 mousedown 却想阻止表单提交，那就找错事件了。 
