按钮点击后应立即禁用并在请求完成（无论成功或失败）时恢复，需在 fetch().finally() 中重置 disabled 状态和文字，配合 loading 提示与表单级锁定，确保无障碍、防重复提交且体验连贯。
按钮点击后立刻禁用但请求失败时无法恢复
这是最常见也最容易被忽略的问题：只写 button.disabled = true，却没在 fetch().catch() 或 finally 里重置状态。用户点一下按钮变灰，接口超时或 500 错误后按钮永远卡在禁用态，页面无提示、无法重试。
正确做法是把禁用和恢复绑定到请求生命周期：
- 提交前先调用
form.checkValidity()，校验不通过就别禁用——否则用户连改错的机会都没了 - 禁用按钮后，必须在
fetch().then().catch().finally()的finally块里执行恢复逻辑 - 不要用
setTimeout固定延时恢复，网络慢时请求还没完按钮就重新可点了 - 恢复时不仅要设
btn.disabled = false，还要还原文字，比如从“提交中…”改回“提交”
用 disabled 还是 pointer-events: none
disabled 是唯一语义正确且无障碍友好的选择。它会阻止键盘聚焦、跳过屏幕阅读器、彻底拦截 click 事件；而 pointer-events: none 只挡鼠标，Tab 键仍能聚焦按钮，JS 仍可调用 click()，对辅助技术完全无效，还可能造成“能 tab 到却点不动”的体验断层。
唯一要注意的是样式覆盖：
- 原生
disabled会让按钮变灰、字体变浅，如果你用了自定义 CSS，必须显式写button:disabled规则 - 推荐基础样式：
button:disabled { opacity: 0.6; cursor: not-allowed; } - 别只靠视觉灰度判断是否锁定——要检查 DOM 上的
disabled属性是否存在
表单有多个提交按钮时只锁一个？
很多表单含“保存”“保存并继续”“预览”等多个 type="submit" 按钮，但开发者常只锁触发事件的那个。结果用户点“保存并继续”被禁用，转头去点“预览”，照样发请求。
安全做法是锁住整个表单的所有提交入口：
- 在
form.addEventListener('submit', ...)里，用form.querySelectorAll('button[type="submit"], input[type="submit"]')批量获取 - 遍历禁用所有匹配按钮，避免漏掉隐藏 submit 按钮或动态插入的按钮
- 如果按钮文字不同（如“提交订单”“确认支付”），恢复时需按原样还原，不能统一设成“提交”
loading 状态没反馈，用户以为卡死
按钮禁用只是交互锁，不是体验锁。用户看到按钮变灰但页面没任何响应，3 秒没动静就会刷新页面——这反而导致重复提交。
必须配合明确 loading 反馈：
- 禁用按钮的同时，把文字改成“提交中…”或加个 SVG spinner 图标
- 别依赖 CSS 动画自动触发：确保 spinner 元素在禁用前已渲染，且
display或visibility被正确控制 - 失败时除了恢复按钮，还得给用户提示，比如
alert("网络错误，请重试")或在表单顶部显示 error message - 键盘回车触发表单提交不会触发 button click，所以防重逻辑必须绑在
form.submit事件上，而不是按钮 click
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
