表单重复提交的根源是事件绑定叠加与防重逻辑缺失；典型现象为一次点击触发多次请求，主因包括onsubmit与addeventlistener冲突、插件校验后手动submit、未禁用按钮及fastclick导致双触发。
表单重复提交的典型现象和根源
用户点击一次“提交”按钮，后端收到多条相同请求；控制台看到 submit 事件被触发多次；甚至按钮没来得及变灰就已发出去两三次。这不是网络延迟导致的错觉，而是 HTML5 表单 + JS 插件（如 jQuery.validate、axios 封装提交、或自定义 form.addEventListener('submit', ...)）组合下常见的事件绑定叠加问题。
常见原因包括：
- 表单同时绑定了原生
onsubmit和 JS 的addEventListener('submit')，且未阻止默认行为 - 插件内部已调用
event.preventDefault()，但外部又手动调用了form.submit()，绕过事件机制 - 按钮类型为
type="submit"，又额外绑定了点击事件并调用form.submit()，造成双触发 - 使用了 AJAX 提交但未禁用按钮，用户连续点击，每次点击都发起新请求
jQuery Validate + AJAX 提交时如何防重复
这是最易出问题的组合：插件校验通过后自动触发 submit，你又在 submitHandler 里用 axios.post 或 fetch 发请求，却忘了禁用按钮或解绑事件。
关键做法：
- 在
submitHandler开头立即设置按钮为disabled：$(this).find(':submit').prop('disabled', true) - 不要手动调用
form.submit()—— jQuery Validate 默认会阻止原生提交，你只需发 AJAX - 若需重置状态，必须在请求完成（无论成功失败）后才恢复按钮：
.finally(() => $btn.prop('disabled', false)) - 避免在
submit事件外再监听click，否则校验通过后点按钮仍会再次触发
原生 addEventListener 中 preventDefault 的位置很关键
很多开发者写成这样：
form.addEventListener('submit', (e) => {
e.preventDefault(); // ✅ 正确位置
if (!validate()) return;
submitViaAjax(); // ❌ 但这里没防重
});
这能阻止页面跳转，但无法防止用户连点。真正有效的防重逻辑必须紧贴请求发起点：
- 提交前加锁变量：
let isSubmitting = false;，开头判断并返回 - 或直接操作 DOM：
const btn = form.querySelector('[type=submit]');，设btn.disabled = true，并在finally恢复 - 注意：仅靠
e.preventDefault()不能阻止按钮被反复点击，它只管表单默认行为
移动端 click 延迟与 fastclick 冲突引发的双触发
在 iOS Safari 或某些安卓 WebView 中，若引入了 fastclick 或类似库，又没正确配置，可能把一次物理点击解释为两次事件（touchstart + click），进而导致绑定在按钮上的 click 处理函数执行两次。
排查方式：
立即学习“前端免费学习笔记（深入）”；
- 在按钮
click回调里打日志：console.log('clicked', Date.now())，看时间戳是否极接近（ - 检查是否同时存在
fastclick.attach(document.body)和未去除的onclick属性 - 更稳妥的做法是：放弃监听按钮
click，只监听表单submit，并确保所有提交路径都收口到这一个事件上
防重复不是加个 setTimeout 或 “点完变灰” 就完事——真正的难点在于厘清事件源、插件干预时机、以及 DOM 状态同步的先后顺序。稍不注意，禁用按钮的代码就被覆盖，或者 preventDefault 被某个插件悄悄忽略。
