应监听表单submit事件而非按钮click，覆盖回车、js submit()、辅助技术等所有提交方式；禁用按钮后须在请求完成（成功/失败）时恢复状态，并添加文字、图标、aria属性等反馈；服务端必须实现幂等以保障安全。

直接在表单提交事件上做控制，比只监听按钮点击更可靠——因为表单可通过回车、JS主动 submit()、无障碍设备等多种方式触发，仅绑 click 容易漏掉。

用 submit 事件统一拦截

监听表单的 submit 事件，而不是按钮的 click。这样能覆盖所有提交入口：

• 用户点提交按钮
• 在输入框中按回车键
• 代码调用 form.submit()（虽不触发 submit 事件，但实际很少手动调用；若必须用，应同步禁用逻辑）
• 屏幕阅读器等辅助技术触发的提交

示例：

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

document.querySelector('form').addEventListener('submit', function(e) {
  const btn = this.querySelector('[type="submit"]');
  if (btn.disabled) {
    e.preventDefault();
    return;
  }
  btn.disabled = true;
  btn.textContent = '提交中...';
});

配合异步操作恢复状态

禁用只是第一步，关键是在请求完成（无论成功或失败）后及时恢复按钮状态，否则用户无法重试：

• AJAX 提交：在 then 和 catch 中都重置按钮
• 原生 form 提交（无 JS 干预）：禁用后页面跳转，无需恢复 —— 但推荐改用 AJAX 或 PRG 模式
• 避免只在 success 回调里恢复，否则失败时按钮永久禁用

加一层视觉与语义反馈

光禁用按钮不够友好。用户需要明确感知“系统已收到操作”：

• 修改按钮文字，如 “提交中…”、“请稍候”
• 添加 loading 图标（可用 CSS ::after 实现）
• 给按钮加 aria-busy="true" 和 aria-disabled="true"，提升可访问性
• 必要时禁用整个表单区域，防止用户修改字段再点一次

不能只靠前端防重

JavaScript 防重复提交本质是体验优化，不是安全机制：

• 用户可禁用 JS、绕过前端逻辑、用 Postman 直接发请求
• 网络超时重试、页面刷新、后退再提交等场景仍可能造成重复
• 服务端必须配合幂等设计：如 token 校验、唯一业务编号、数据库唯一索引、乐观锁等

Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南