最直接有效的方式是在点击事件处理函数开头立即设置 button.disabled = true 并修改 textcontent，同时配合 data-submitted 标记、防抖及服务端幂等设计实现多重防护。
点击后禁用按钮并改文字
最直接有效的方式是在用户点击按钮瞬间，用 JavaScript 立即禁用它，并改变文字提示，防止视觉和交互层面的重复触发。disabled 属性会阻止表单提交和点击事件，但要注意它不阻止通过 submit() 方法手动提交。
- 必须在
click事件处理函数开头就设置button.disabled = true，不能等异步请求发出去再设 - 建议同时修改
button.textContent（比如改成"提交中..."），避免用户误以为没点上又狂点 - 如果用了
type="submit"按钮，禁用后表单不会自动提交——所以得确保你的提交逻辑是显式调用form.submit()或 fetch 请求，而不是依赖原生提交
表单提交前检查是否已提交过
光靠禁用按钮还不够。用户可能绕过 JS（比如禁用脚本、用 curl 提交），或页面异常刷新后重新提交。服务端永远要校验，但前端可加一层轻量标记，配合按钮状态做双重保险。
- 给表单加一个自定义属性，如
data-submitted="false"，点击时先检查这个值，是"true"就直接return - 提交成功或失败后，记得重置该标记（比如
form.dataset.submitted = "false"），否则后续正常提交会被拦住 - 不要只依赖全局变量（如
window.isSubmitting），多个表单共存时容易冲突
防抖 + 按钮状态同步失效
有些场景下按钮被禁用，但用户快速连点或键盘回车触发多次提交——尤其当按钮绑了 addEventListener('click', ...) 却没清理旧监听器时，容易叠加事件。
- 禁用按钮后，不必移除事件监听器；但若用了防抖（
debounce），要注意防抖函数内部是否还读取了已过期的this或闭包变量 - 推荐写法：在事件回调开头加
if (this.disabled) return;，比单纯依赖防抖更可靠 - 如果按钮是动态插入的（比如用
innerHTML或框架 v-if 渲染），确保每次插入后都绑定一次事件，且不重复绑定
服务端需配合幂等性设计
前端所有限制都只是“防手滑”，真正可靠的防线在后端。按钮禁用再严，用户开两个标签页、用 Postman 或刷新页面重发，照样可能重复提交。
- 关键操作（如支付、下单）必须带唯一请求标识，比如前端生成
idempotency-key请求头，服务端根据该 key 去重 - 数据库写操作建议用
INSERT ... ON CONFLICT DO NOTHING（PostgreSQL）或INSERT IGNORE（MySQL）做幂等插入 - 别依赖前端传来的
timestamp或random值做去重，它们不可信；要用服务端签发的 token 或签名
按钮禁用只是第一道门，后面还有表单标记、防抖、服务端幂等层层兜底。漏掉任何一环，都可能让重复提交钻空子——尤其是那个 data-submitted 标记，很多人设了却忘了在错误回调里重置，结果用户改完数据点不动了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
