disabled 属性本身仅作状态标记，防重复点击需 js 同步设置；正确做法是事件回调首行立即设 btn.disabled = true，并在 finally 中恢复，同时配合 preventdefault 或改用 type="button" 避免表单重复提交。
用 disabled 属性禁用按钮，但必须同步设置
仅靠 HTML 的 disabled 属性本身不能“自动”防重复点击，它只是个状态标记；真正起作用的是你在 JS 中**立即、同步地设置它**。如果写成 fetch().then(() => btn.disabled = false) 这类异步赋值，用户连点两次，第一次还没来得及设 disabled，第二次就已进入函数体——竞态窗口就开了。
正确做法是把 btn.disabled = true 放在事件回调第一行：
button.addEventListener('click', () => {
const btn = event.target;
btn.disabled = true; // ✅ 同步、首行、不可跳过
btn.textContent = '提交中';
fetch('/api/submit', { method: 'POST' })
.catch(() => {})
.finally(() => {
btn.disabled = false; // ✅ 成功失败都重置
btn.textContent = '提交';
});
});
-
disabled对<button type="submit"></button>和<input type="submit">有效，对type="button"也有效，但后者本就不触发表单提交 - 禁用后用户仍可能按回车提交表单——因为
disabled不拦截form.submit事件，所以还得监听form.addEventListener('submit', e => e.preventDefault())或统一走 JS 提交 - 服务端返回 4xx/5xx 错误时，
finally依然执行，按钮能恢复；但若没写finally，只在then里恢复，失败后按钮就永远锁死
form 元素的 onsubmit 和按钮 type 必须对齐
如果你的按钮是 <button type="submit"></button>，又同时绑了 click 和 form.onsubmit，不加控制就会触发两次请求：一次是 click 回调里的 fetch，一次是表单默认提交。这不是 bug，是浏览器标准行为。
解法只有两个，选一个并坚持用：
- 保留
type="submit"，但在click处理器开头加event.preventDefault()—— 它只阻止本次点击引发的表单提交，不影响其他逻辑 - 直接改成
type="button"—— 语义更干净，彻底切断和表单的隐式绑定，后续想怎么提交都由 JS 全权控制
别混用：比如按钮设为 submit 却在 JS 里手动 fetch，又忘了 preventDefault，就是并发请求的温床。
HTML 属性本身无法解决并发，但能配合 JS 做状态隔离
disabled 是唯一一个能被浏览器原生识别并视觉反馈（变灰、禁用焦点）的防重属性，但它不提供任何“时间窗口”或“请求生命周期”管理能力。真正的并发防护来自 JS 层的配合：
- 每次 fetch 前生成新
AbortController，保存上一个实例并在新请求前调abort()—— 这能中止前一个未完成的请求，避免堆积 - 服务端必须校验
Idempotency-Key或一次性 token，否则前端所有disabled都可被绕过（比如删掉属性后点右键“检查元素”再点） - 不要依赖
onclick="submitForm()"这种内联写法，它难调试、难复用、难做统一拦截；用addEventListener才能精确控制执行时机和上下文
最易忽略的一点：disabled 是表单控件属性，不是按钮通用锁；它对键盘操作（如回车）、自动化脚本、开发者工具修改完全不设防——所以它只是体验层的第一道栅栏，不是安全边界。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
