核心是监听form的submit事件并调用e.preventdefault()；因回车、api调用等均触发submit而非click，仅监听button click会漏掉多种提交方式，无法全覆盖拦截。
在 JavaScript 中监听表单提交事件并阻止默认跳转，核心是使用 submit 事件配合 event.preventDefault()。
绑定 submit 事件监听器
不要监听按钮的 click，而要监听整个 <form></form> 元素的 submit 事件。该事件会在用户点击提交按钮、按回车键或调用 form.submit()（注意：原生方法不触发该事件）时触发。
推荐写法：
Comprehensive Three.js 3D graphics reference
下载
详细的 Three.js 3D 图形参考，涵盖场景设置、相机、几何体、材质、光照、动画、控制器、加载器、数学工具和调试。
const form = document.querySelector('form');
form.addEventListener('submit', function (e) {
e.preventDefault(); // 阻止页面刷新/跳转
// 在这里执行你的逻辑，比如验证、发请求等
});
为什么必须用 preventDefault()？
浏览器对 <form></form> 的默认行为是：收集字段值，按 method 和 action 发起一次 HTTP 请求，并跳转到响应页面。即使你没写 action，也会重新加载当前页。
仅靠 return false 在现代写法中不可靠（它还试图阻止冒泡和默认行为，但语义模糊），所以明确写 e.preventDefault() 是最清晰、最标准的做法。
常见错误与注意事项
- 监听了
button的click而非form的submit—— 会漏掉回车提交 - 忘记加
e.preventDefault()，导致页面跳转，AJAX 请求可能被中断 - 在异步操作（如
fetch）后才调用preventDefault()—— 它必须在事件处理函数同步执行阶段调用 - 多个监听器中某一个没调用
preventDefault()，默认行为仍会发生（只要有一个没阻止，就拦不住）
结合验证的典型用法
提交前校验，合法则发请求，失败则提示并阻止提交：
form.addEventListener('submit', async function (e) {
e.preventDefault();
const email = form.email.value;
if (!email.includes('@')) {
alert('邮箱格式不正确');
return;
}
try {
const res = await fetch('/api/login', {
method: 'POST',
body: new FormData(form)
});
if (res.ok) {
window.location.href = '/dashboard';
}
} catch (err) {
alert('提交失败，请重试');
}
});
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
