最直接有效的做法是提交瞬间禁用按钮并保持至请求完成或跳转。需在form.submit事件中设置disabled，配合finally恢复，服务端仍需幂等防护。
点击后立即禁用 submit 按钮是最直接有效的做法
用户连点提交按钮导致后端收到多条重复请求，本质是前端没做防抖控制。最简单可靠的解法就是在表单提交触发的瞬间，把按钮设为 disabled，并保持其状态直到请求完成或页面跳转。
注意：仅靠 CSS 的 pointer-events: none 或透明遮罩层不可靠——它们不阻止表单原生提交行为，也无法防止键盘回车提交。
- 必须在
form.onsubmit或button.onclick中设置button.disabled = true - 如果使用
fetch或axios提交，务必在finally块中恢复按钮（除非跳转） - 避免在
submit事件里用event.preventDefault()后又手动form.submit()，这会绕过浏览器默认的提交禁用逻辑
form.addEventListener('submit') 是比 onclick 更稳妥的监听方式
用户可能通过回车键、辅助设备或脚本触发提交，onclick 无法捕获这些场景；而 submit 事件是表单级的统一入口，覆盖所有提交路径。
示例：
document.querySelector('form').addEventListener('submit', function(e) {
const btn = e.target.querySelector('[type="submit"]');
if (btn) {
btn.disabled = true;
btn.textContent = '提交中…';
}
});
- 不要只查
document.getElementById('submit-btn')，因为表单内可能有多个 submit 按钮 - 若按钮是
<input type="submit">，需用btn.value修改文字，而非textContent - 禁用后记得在 JS 错误或网络失败时恢复按钮，否则用户卡死——除非你明确要强制刷新重试
服务端仍需幂等防护，前端禁用只是用户体验层补丁
前端禁用按钮不能替代服务端的防重逻辑。网络延迟、页面意外刷新、用户强制启用按钮等都会绕过前端限制。
- 后端应校验请求唯一性（如
idempotency-key请求头、订单号去重、数据库唯一约束） - 前端可配合生成一次性 token：提交前从服务端取
token，提交时带上，服务端验证后即作废 - 若使用
POST-redirect-GET模式，浏览器刷新不会重复提交，但需确保服务端正确实现重定向而非渲染结果页
Vue/React 等框架中别直接操作 disabled DOM 属性
框架接管了元素状态，直接改 button.disabled 可能被下一次响应式更新覆盖，造成按钮“闪一下又变可用”。
- Vue 中应绑定
:disabled="isSubmitting"，并在提交逻辑中同步修改isSubmitting数据 - React 中用
useState管理按钮状态，并确保setState在异步开始前执行（不是在.then里才设） - 避免在
useEffect或watch中反向同步按钮 disabled 状态——这是倒置控制，易引发竞态
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
