禁用提交按钮的时机不当会干扰浏览器原生表单提交流程，尤其在 Chromium 内核浏览器及移动端 Firefox 中易引发挂起；正确做法是在 submit 事件中禁用按钮，而非 click 事件。
禁用提交按钮的时机不当会干扰浏览器原生表单提交流程，尤其在 chromium 内核浏览器及移动端 firefox 中易引发挂起；正确做法是在 `submit` 事件中禁用按钮，而非 `click` 事件。
问题根源在于：你当前在 click 事件监听器中立即禁用按钮（requestBtn.disabled = true），但此时浏览器尚未触发表单的 submit 事件——尤其是当按钮位于 <form></form> 内且 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 事件中处理，即可彻底规避跨浏览器挂起问题，同时提升可访问性与健壮性。
立即学习“Java免费学习笔记（深入）”；
