正确拦截表单提交需监听form的submit事件并立即调用event.preventDefault()，不可用button click或return false；拦截后用FormData提取数据、验证、异步提交。
监听表单 submit 事件并拦截默认提交，核心就两步：正确绑定事件、及时调用 event.preventDefault()。不能在按钮 click 里拦，也不能靠 return false，否则回车提交或移动端触发表单时会失效。
必须监听表单自身的 submit 事件
表单提交可能由点击 type="submit" 按钮触发，也可能由用户在任意可编辑字段中按回车键触发。只有监听 form 元素的 'submit' 事件，才能覆盖所有路径。
- ✅ 正确写法：
form.addEventListener('submit', handler) - ❌ 错误写法：
button.addEventListener('click', ...)—— 拦不住回车提交 - ❌ 错误写法：
—— 混用内联属性易出错，也不利于维护
preventDefault() 必须在 submit 回调里立即调用
event.preventDefault() 是唯一可靠阻止页面刷新和跳转的方法。它不会影响事件冒泡，也不会干扰后续 JavaScript 逻辑执行。
- 必须放在回调函数开头或验证逻辑前，避免验证失败后仍刷新
- 不要依赖
return false：它在 addEventListener 中只等价于同时调用preventDefault()和stopPropagation()，容易误伤其他监听器 - 禁用按钮防重复提交是额外优化，不是 preventDefault 的替代方案
常见搭配操作（验证 + 收集数据 + 异步提交）
拦截之后，通常要手动处理数据。推荐用 FormData 统一提取值，再转成对象或直接发送：
- 用
new FormData(form)获取所有字段，兼容文件上传 - 用
Object.fromEntries(formData)转成普通对象（注意：同名多值字段需单独处理） - 验证失败时提示用户，并保持焦点在问题字段上
- 提交中禁用按钮、显示 loading 状态，成功后重置或跳转
完整示例（含邮箱校验）
const form = document.querySelector('form');<br>form.addEventListener('submit', function(event) {<br> event.preventDefault(); // 第一时间拦截<br><br> const email = form.email?.value || '';<br> if (!email.includes('@')) {<br> alert('邮箱格式不正确');<br> form.email?.focus();<br> return;<br> }<br><br> const data = Object.fromEntries(new FormData(form));<br> fetch('/api/submit', {<br> method: 'POST',<br> headers: { 'Content-Type': 'application/json' },<br> body: JSON.stringify(data)<br> });<br>});
