禁用提交按钮后部分浏览器请求挂起的技术问题咨询

核心问题 #

你的代码中，点击type="submit"的按钮后立即执行requestBtn.disabled = true;，导致部分浏览器中断了表单提交流程。这是因为不同浏览器对「按钮点击事件回调」和「表单默认提交行为」的执行顺序、状态检查逻辑存在差异：

• Firefox 119允许在点击回调中修改按钮状态后，仍继续完成默认提交；
• Chromium系、iPad Firefox、Windows环境下的浏览器，会在默认提交行为执行前检查按钮状态，一旦发现按钮被禁用，就取消提交请求。

可行解决方案 #

方案1：延迟禁用按钮 #

给禁用操作加一个极短的延迟，让浏览器先完成表单提交的初始化流程，再禁用按钮：

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

  requestSpinner.style.visibility = 'hidden';
  requestSpinner.style.display = 'none';

  const requestBtn = requestBtnCard ? requestBtnCard : requestBtnRequest;

  requestBtn.addEventListener('click', 
    () => {
      // 延迟100ms禁用按钮，确保浏览器先触发提交
      setTimeout(() => {
        requestBtn.disabled = true;
      }, 100);
      requestBtn.innerText = 'Processing ...';

      requestSpinner.style.display = 'inline-block';
      requestSpinner.style.visibility = 'visible';
    }
  );
});

方案2：手动触发表单提交（更可靠） #

阻止按钮的默认点击行为，手动调用表单的submit()方法，再禁用按钮，彻底规避浏览器状态检查的差异：

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

  requestSpinner.style.visibility = 'hidden';
  requestSpinner.style.display = 'none';

  const requestBtn = requestBtnCard ? requestBtnCard : requestBtnRequest;

  requestBtn.addEventListener('click', 
    (e) => {
      // 阻止默认提交行为，避免重复提交
      e.preventDefault();
      // 获取按钮所属的表单
      const form = requestBtn.form;
      if (form) {
        // 手动触发表单提交
        form.submit();
      }
      // 立即禁用按钮
      requestBtn.disabled = true;
      requestBtn.innerText = 'Processing ...';

      requestSpinner.style.display = 'inline-block';
      requestSpinner.style.visibility = 'visible';
    }
  );
});

注意：确保按钮嵌套在<form>标签内，否则requestBtn.form会返回null，此时需要手动通过document.getElementById('form-id')获取表单元素。

方案3：CSS模拟禁用状态（备选） #

如果不想依赖JS的执行顺序，可以不真正禁用按钮，而是用CSS模拟禁用样式，同时用变量标记已提交状态，防止重复点击：

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

  requestSpinner.style.visibility = 'hidden';
  requestSpinner.style.display = 'none';

  const requestBtn = requestBtnCard ? requestBtnCard : requestBtnRequest;
  let isSubmitted = false;

  requestBtn.addEventListener('click', 
    () => {
      if (isSubmitted) return;
      isSubmitted = true;
      // 添加禁用样式类（需提前定义CSS）
      requestBtn.classList.add('disabled-btn');
      requestBtn.innerText = 'Processing ...';

      requestSpinner.style.display = 'inline-block';
      requestSpinner.style.visibility = 'visible';
    }
  );
});

对应的CSS：

.disabled-btn {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
}

内容的提问来源于stack exchange，提问作者jhogarth