核心是监听form的submit事件并调用e.preventDefault()；因回车、API调用等均触发submit而非click，仅监听button click会漏掉多种提交方式，无法全覆盖拦截。
在 JavaScript 中处理表单提交事件并阻止默认行为，核心是监听 submit 事件，并在事件处理函数中调用 event.preventDefault()。
绑定 submit 事件监听器
推荐为 <form> 元素添加 submit 事件监听器，而不是监听按钮的 click。因为表单可通过回车键、API 提交（如 form.submit()）等多种方式触发，只有 submit 事件能覆盖所有情况。
示例：
const form = document.querySelector('#myForm');
form.addEventListener('submit', function (e) {
e.preventDefault(); // 阻止页面跳转或刷新
// 后续自定义逻辑，如验证、发送 AJAX 请求等
});
为什么不能只监听按钮 click？
仅监听提交按钮的 click 无法捕获以下行为：
立即学习“Java免费学习笔记（深入）”；
deep-java-review
下载
Java项目代码review工具。分析Git变更+完整调用链路上下文，推断业务需求，进行多维度评分和分类汇总，生成完整PRD文档。包含细粒度Java代码审查清单（Null安全、异常处理、Streams、并发、equals/hashCode、资源管理、API设计、性能、MyBatis/ORM、事务边界、SQL/DD...
- 用户在输入框中按 Enter 键提交
- 通过 JavaScript 调用
form.submit()（该调用不会触发click，但会触发submit） - 屏幕阅读器等辅助技术的提交操作
所以，必须监听 submit 事件才能可靠拦截所有提交途径。
常见配合操作：验证与异步提交
阻止默认行为后，通常需要手动处理数据：
- 获取表单字段值：用
FormData或直接读取input.value - 前端验证：检查必填项、邮箱格式等，验证失败时提示用户并 不执行后续提交
- 发送请求：用
fetch或axios提交数据，成功后可重置表单或跳转
示例片段：
form.addEventListener('submit', async function (e) {
e.preventDefault();
const formData = new FormData(form);
const data = Object.fromEntries(formData);
if (!data.email || !data.password) {
alert('请填写完整信息');
return;
}
try {
const res = await fetch('/login', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(data)
});
if (res.ok) {
alert('登录成功');
form.reset();
}
} catch (err) {
alert('提交失败，请重试');
}
});
注意表单的 type 和 button 类型
确保提交按钮的 type="submit"（默认值），否则点击不会触发 submit 事件；如果写成 type="button"，需手动调用 form.requestSubmit() 触发带验证的提交流程，再用 preventDefault 拦截。
另外，避免在事件处理中直接调用原生 form.submit() —— 它绕过所有监听器且无法被 preventDefault 拦截。
