关键不是“拦住点击”，而是让多次提交只产生一次有效请求：前端需监听submit事件、用e.preventDefault()拦截并禁用按钮+状态变量双重防护，配合AbortController取消旧请求；后端必须校验唯一token或设计幂等接口。
防止用户重复提交表单，关键不是“拦住点击”，而是让多次提交只产生一次有效请求——前端要快速响应、明确反馈，后端必须做幂等校验。纯靠 JS 禁用按钮只是基础防线，容易被绕过，需搭配信号控制、状态管理与服务端协同。
监听 submit 事件而非 click
表单可通过鼠标点击、回车键、form.submit() 等多种方式触发提交，仅监听按钮 click 会漏掉回车提交等路径。正确做法是绑定在 form 元素的 submit 事件上，并第一时间阻止默认行为：
- 用
e.preventDefault()拦截原生跳转或刷新 - 立即禁用提交按钮（含视觉反馈，如改文字为“提交中”）
- 确保所有验证逻辑执行完毕后再发起请求，避免验证通过前就禁用按钮却验证失败
用 AbortController 主动取消旧请求
用户快速连点时，前一个 fetch 可能还没结束，新请求已发出。AbortController 能让旧请求“静默终止”，避免无效请求堆积或干扰响应处理：
dmap-jsapi-skill
下载
DMap GL地图JSAPI（dmapgl）开发指南。用于编写、审查、调试 DMap 地图 API 代码，涵盖地图初始化、覆盖物渲染、图层管理、事件处理、控件交互等任务。当用户提及 dmap、dmapgl、jsapi‑gl 或相关地图开发需求时自动触发。
- 声明一个模块级或闭包变量（如
let currentController = null），而非每次提交都新建 - 提交前调用
currentController?.abort()，再创建新 controller 并传入signal - 在
catch中识别AbortError，不报错也不提示，只当它没发生过 - 组件卸载或页面离开前记得调用
currentController?.abort()，防内存泄漏
配合状态变量 + 按钮禁用双重保险
除了 DOM 层面禁用按钮，建议再维护一个 JS 状态变量（如 isSubmitting），用于逻辑判断和条件拦截：
- 在
submit处理函数开头加if (isSubmitting) return，防止事件冒泡或异常重入 - 将按钮
disabled属性与该变量同步，React 中可直接绑定disabled={isSubmitting} -
finally或 Promise settle 后恢复状态，失败时也要重置，否则按钮永远卡死
服务端必须配套防重机制
前端一切防护都可被绕过（如禁用 JS、用 Postman 直发请求），因此后端不可省略：
- 下发唯一 token（如渲染表单时写入 hidden input），提交时校验并立即作废
- 对关键操作（下单、注册）设计幂等接口：用订单号、用户 ID + 时间戳等组合做数据库唯一索引
- 使用 Redis 记录「用户+操作类型+业务ID」的提交指纹，10 秒内重复则拒绝
