最直接有效的方式是在表单提交时立即将提交按钮设为 disabled，绑定 form 的 submit 事件而非按钮 click，配合 fetch/axios 的 finally 重置按钮，并用 isSubmitting 标志防重复提交，重置表单时同步恢复按钮状态。
最直接有效的方式是在表单提交时立即将提交按钮设为 disabled，同时配合表单的 submit 事件监听和合理的重置逻辑，避免用户误操作或刷新后无法再次提交。
监听 submit 事件并禁用按钮
不要依赖按钮的 click 事件（可能绕过，如回车提交），而是绑定在 form 元素的 submit 事件上：
document.querySelector('form').addEventListener('submit', function(e) {
const submitBtn = this.querySelector('[type="submit"]');
if (submitBtn) {
submitBtn.disabled = true;
submitBtn.textContent = '提交中...';
}
});
这样无论用户点击按钮还是按 Enter 键，都能被捕获并禁用。
服务端响应后才可恢复按钮（推荐）
仅前端禁用不够健壮。应在请求完成（成功或失败）后再决定是否恢复按钮，防止网络延迟或错误导致按钮长期锁定：
立即学习“Java免费学习笔记（深入）”；
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
- 使用
fetch或axios发送数据后，在then/catch或finally中重置按钮 - 若请求成功，可跳转页面或显示提示；若失败，需恢复按钮并给出错误反馈
- 示例中用
finally确保无论成败都解锁（适合简单场景）
form.addEventListener('submit', async function(e) {
e.preventDefault();
const btn = this.querySelector('[type="submit"]');
btn.disabled = true;
btn.textContent = '提交中...';
try {
const res = await fetch(this.action, {
method: 'POST',
body: new FormData(this)
});
if (res.ok) {
alert('提交成功');
// 可选：重置表单 this.reset();
} else {
throw new Error('提交失败');
}
} catch (err) {
alert(err.message);
} finally {
btn.disabled = false;
btn.textContent = '提交';
}
});
补充防护：添加提交状态标记
防止极端情况（如多次快速触发 submit 事件），可用布尔变量做守卫：
- 定义一个
isSubmitting标志，初始为false - submit 回调开头判断：若为
true直接 return - 设置为
true后再禁用按钮，避免竞态
这对防止用户狂点、或某些框架中事件冒泡重复触发更稳妥。
注意表单重置时要同步恢复按钮
如果用户点击「重置」按钮（type="reset"），需确保提交按钮也回到可用状态：
form.addEventListener('reset', function() {
const btn = this.querySelector('[type="submit"]');
if (btn) {
btn.disabled = false;
btn.textContent = '提交';
}
});
否则重置后按钮仍被禁用，影响正常流程。
