JavaScript 表单提交时禁用按钮导致浏览器挂起的解决方案

禁用提交按钮的时机不当会干扰浏览器原生表单提交流程，尤其在 Chromium 内核浏览器及移动端 Firefox 中易引发挂起；正确做法是在 submit 事件中禁用按钮，而非 click 事件。

禁用提交按钮的时机不当会干扰浏览器原生表单提交流程，尤其在 Chromium 内核浏览器及移动端 Firefox 中易引发挂起；正确做法是在 `submit` 事件中禁用按钮，而非 `click` 事件。

问题的症结其实就在这里：当前代码在 click 事件监听器里，第一时间就把按钮禁用了（requestBtn.disabled = true）。可这一步发生时，浏览器往往还没来得及触发表单的 submit 事件。尤其当按钮放在

内部，并且设置了 type="submit"，通常是 click 刚结束，后面马上就会跟着 submit。麻烦也正出在这儿：有些浏览器，比如 Chromium、iOS Safari 和 Firefox，在发现按钮已经被禁用后，可能会直接中断表单提交流程，或者让提交逻辑出现延迟。结果就是，请求根本没发出去，页面看起来像“假死”了一样，而服务器端也收不到任何请求。

✅ 正确做法是将禁用逻辑移至 submit 事件中，确保表单提交流程已启动、且禁用操作不会阻断其传播：

document.addEventListener('DOMContentLoaded', () => {
const requestSpinner = document.getElementById('request-spinner');
const requestBtnCard = document.getElementById('card-button');
const requestBtnRequest = document.getElementById('submit-request');

// 隐藏加载指示器（初始状态）
requestSpinner.style.display = 'none';
requestSpinner.style.visibility = 'hidden';

const requestBtn = requestBtnCard || requestBtnRequest;
if (!requestBtn) return;

// 关键修复：监听 form 的 submit，而非 button 的 click
const form = requestBtn.closest('form');
if (form) {
form.addEventListener('submit', (e) => {
// 阻止重复提交前先确保 UI 响应
requestBtn.disabled = true;
requestBtn.textContent = 'Processing...';

requestSpinner.style.display = 'inline-block';
requestSpinner.style.visibility = 'visible';
});
} else {
// 若按钮不在 form 内（如手动 AJAX 提交），则需显式 preventDefault 并自行处理
requestBtn.addEventListener('click', (e) => {
e.preventDefault(); // 显式阻止默认行为
requestBtn.disabled = true;
requestBtn.textContent = 'Processing...';
requestSpinner.style.display = 'inline-block';
requestSpinner.style.visibility = 'visible';

// 此处执行你的 AJAX 或其他逻辑
// fetch('/submit', { method: 'POST', ... })
// .then(() => { /* 处理成功 */ })
// .catch(() => { /* 恢复按钮：requestBtn.disabled = false; */ });
});
}
});

? 重要注意事项：

• ✅ 永远优先监听 form.submit：这是语义正确、兼容性最佳的方式；click 事件无法可靠捕获所有提交触发路径（例如回车提交、辅助技术触发等）。
• ⚠️ 避免在 click 中禁用 type="submit" 按钮：这会破坏浏览器对表单生命周期的控制，尤其影响移动端 WebKit 引擎行为。
• ? 务必提供错误恢复机制：网络失败或验证异常时，应重置按钮状态（disabled = false）并还原文案，否则用户无法重试。
• ? 若使用框架（React/Vue）或现代构建工具，推荐结合状态管理（如 useState 或 ref）控制按钮禁用态，并在异步请求 finally 块中重置。

总结：表单交互必须尊重 HTML 表单事件流——submit 是提交的权威入口点。将 UI 禁用与业务逻辑解耦，统一在 submit 事件中处理，即可彻底规避跨浏览器挂起问题，同时提升可访问性与健壮性。