在表单提交时直接禁用按钮（如 button.disabled = true）会干扰 Chromium 等浏览器的原生提交流程，导致请求未发出；应将禁用逻辑移至 submit 事件而非 click 事件中，确保表单正常提交后再禁用。
在表单提交时直接禁用按钮（如 `button.disabled = true`）会干扰 chromium 等浏览器的原生提交流程，导致请求未发出；应将禁用逻辑移至 `submit` 事件而非 `click` 事件中，确保表单正常提交后再禁用。
JavaScript 中在 click 事件中立即禁用提交按钮（尤其是 <button type="submit"></button>）是一个常见但危险的操作。问题根源在于：click 事件触发后，浏览器本应紧接着触发 submit 事件并提交表单，但若此时按钮已被禁用，部分浏览器（如 Chromium、Safari/iPad Firefox、旧版 Edge）会中断后续提交流程——看似“挂起”，实则是提交被静默丢弃。Firefox 桌面版因实现差异可能表现正常，但这属于行为不一致，不可依赖。
✅ 正确做法是：将禁用逻辑绑定到 submit 事件上，而非 click。这样可确保表单已进入提交流程，再执行 UI 反馈（禁用 + 加载态），既防重复提交，又不破坏提交链路。
推荐方案一：监听表单 submit 事件（推荐）
document.addEventListener('DOMContentLoaded', () => {
const requestSpinner = document.getElementById('request-spinner');
const requestBtnCard = document.getElementById('card-button');
const requestBtnRequest = document.getElementById('submit-request');
// 隐藏加载 Spinner 初始状态
requestSpinner.style.display = 'none';
requestSpinner.style.visibility = 'hidden';
// 查找所属表单（关键！）
const form = requestBtnRequest?.closest('form') ||
requestBtnCard?.closest('form');
if (form) {
form.addEventListener('submit', (e) => {
// ✅ 在 submit 中统一处理：禁用所有 submit 按钮
const submitButtons = form.querySelectorAll('button[type="submit"], input[type="submit"]');
submitButtons.forEach(btn => {
btn.disabled = true;
btn.textContent = 'Processing...';
});
// 显示加载 Spinner
requestSpinner.style.display = 'inline-block';
requestSpinner.style.visibility = 'visible';
});
}
});⚠️ 注意：务必通过
form.closest('form')获取表单容器，并监听其submit事件——这是语义正确且兼容性最佳的方式。不要仅依赖按钮的click。
推荐方案二：内联 onsubmit（轻量场景可用）
若无法修改 JS 逻辑，可在 HTML 表单中直接声明：
<form action="/submit" method="POST" onsubmit="this.querySelector('[type=submit]').disabled = true; return true;">
<div class="row">
<div class="col-sm-4">
<button type="submit" name="submit" id="submit-request" class="btn btn-primary btn-lg">
Request Tickets
</button>
</div>
<div class="col-sm-4">
<div class="spinner-border" role="status" id="request-spinner">
<span class="visually-hidden">Processing ...</span>
</div>
</div>
</div>
</form>? 提示：
onsubmit="...; return true"显式返回true确保默认提交不被阻止；禁用操作需在return前执行。
额外建议与注意事项
-
避免混合事件监听：不要同时为同一按钮绑定
click和submit处理逻辑，易引发竞态。 - 服务端仍需幂等防护：前端禁用仅为用户体验优化，服务端必须校验请求唯一性（如 token、时间戳、数据库唯一约束）。
-
无障碍支持：禁用按钮后，应同步更新
aria-busy="true"和aria-disabled="true"属性，提升屏幕阅读器体验。 -
Spinner 可视化优化：建议使用 CSS
opacity或transition平滑显示，而非突兀的display: inline-block切换。
遵循 submit 事件驱动的禁用策略，即可彻底规避 Chromium/iPad/Firefox/Windows 下的挂起问题，实现跨浏览器稳定可靠的表单提交体验。
