disabled属性无法防止重复提交，必须在form submit事件首行调用e.preventdefault()并立即禁用所有提交控件；异步提交须用try...catch...finally确保按钮状态恢复；服务端幂等校验才是唯一可靠防线。
disabled 属性本身不能防止重复提交
直接写 disabled="disabled" 或在 HTML 里静态设 disabled，只影响初始渲染状态，对用户点击毫无约束力。表单重复提交是运行时行为，必须由 JavaScript 在事件触发的**第一时刻**动态控制，否则连点、回车、JS 调用 form.submit() 全部绕过。
submit 事件中禁用按钮的正确时机
监听 form 的 submit 事件，不是按钮的 click；且必须在回调首行就做两件事：
-
e.preventDefault()阻止原生提交（否则禁用按钮后仍会发请求） - 立即获取并设置所有提交控件的
disabled = true，包括button[type="submit"]和input[type="submit"] - 不要等校验、fetch、动画完成后再设 disabled——那已经晚了
为什么仅靠 disabled 不够，还容易永久卡死
常见错误是只在 fetch().then() 里恢复按钮，但网络超时、JSON 解析失败、HTTP 500、甚至 JS 报错都会导致 finally 没执行，按钮永远灰着。可靠做法只有：
- 所有异步提交（
fetch/axios/XMLHttpRequest）必须包裹try...catch...finally -
finally块里无条件执行btn.disabled = false - 若成功后要跳转或清空表单，恢复 disabled 可省略；但失败或取消场景下，必须恢复，否则用户无法重试
移动端和键盘回车的兼容性盲区
iOS Safari 和部分安卓 WebView 中，快速双击或 touchmove 后 click 可能导致 disabled 渲染延迟，出现“视觉未变、实际已禁用”或“点了两次才生效”的假象。这不是 bug，而是事件调度与样式更新不同步。应对方式：
- 禁用按钮的同时，同步加
style.pointerEvents = 'none'（仅作补充，不可替代disabled） - 对
button:disabled显式定义opacity、cursor: not-allowed和background-color，避免默认样式不明显 - 回车触发表单提交不依赖按钮状态，所以必须统一走
form.submit()+submit事件拦截，不能只锁按钮
disabled 只是让用户少点几次，后端才是唯一可信防线。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
