preventDefault没生效的主因是未在form的submit事件中同步调用：必须监听form元素的submit事件，首行调用event.preventDefault()，避免异步、委托或内联写法错误（如onsubmit中未return false）。
表单提交时 preventDefault 为什么没生效？
最常见的原因是事件监听没绑定到正确的时机或对象——比如给 <button> 绑了点击事件，却忘了表单实际触发的是 submit 事件。HTML 表单默认行为（页面跳转/刷新）由 submit 事件驱动，不是 click。
- 必须监听
form元素的submit事件，而不是按钮的click - 确保事件处理函数是同步执行的，不要在异步回调（如
setTimeout或 Promise.then）里调用preventDefault() - 如果用了事件委托（例如监听
document），要检查event.target是否为form，再调用preventDefault()
addEventListener 中正确调用 preventDefault 的写法
核心就一条：在 submit 事件回调中第一行调用 event.preventDefault()，且不能遗漏 event 参数。
<form id="myForm">
<input name="username" required>
<button type="submit">提交</button>
</form>
<script>
const form = document.getElementById('myForm');
form.addEventListener('submit', function(event) {
event.preventDefault(); // 必须放这里，且不能漏掉
console.log('表单未提交，可执行 AJAX');
// fetch('/api/login', { method: 'POST', body: new FormData(form) });
});
</script>
用 onsubmit 内联属性时怎么阻止默认行为？
内联写法容易出错：必须显式 return false，仅写 preventDefault() 不起作用，因为内联 handler 是字符串求值，不自动传入 event 对象。
- ✅ 正确：
onsubmit="doSubmit(); return false;"或onsubmit="event.preventDefault(); return false;" - ❌ 错误：
onsubmit="event.preventDefault();"（event未定义） - ❌ 错误：
onsubmit="doSubmit();"（没返回false，默认行为照常触发）
<form onsubmit="handleSubmit(); return false;">
<input name="email">
<button type="submit">注册</button>
</form>
<script>
function handleSubmit() {
console.log('已拦截提交');
// 这里可以做验证、发请求等
}
</script>
为什么加了 preventDefault 还跳转？检查这三点
多数“失效”问题其实和 preventDefault 本身无关，而是上下文干扰：
立即学习“前端免费学习笔记（深入）”；
- 表单里有多个
<button>，其中一个没设type="button"，点它会触发表单提交（默认type="submit"） - JS 报错导致事件处理函数提前终止，
preventDefault()根本没执行到（打开控制台看红字） - 使用了框架（如 Vue/React），但直接操作了原生 DOM 表单，而框架的响应式逻辑或合成事件机制可能干扰原生事件流
真要调试，最简单办法是在事件回调开头加 console.log('submit fired')，确认是否进得来；再加 console.log(event.isDefaultPrevented()) 看是否真的被阻止了。
