表单提交按钮点击事件中禁用按钮导致表单无法提交的突发问题咨询

这个问题其实涉及浏览器表单提交的事件处理逻辑，咱们一步步拆解来分析：

为什么最初的“立刻禁用按钮”会阻断表单提交？ #

当你点击submit类型的按钮时，浏览器的处理流程是：先触发按钮的click事件，然后执行表单提交的默认行为。如果在click事件回调里立刻把按钮设为disabled = true，在某些浏览器环境或者页面JS逻辑的影响下，浏览器会把按钮的禁用状态和提交行为绑定——它会认为“按钮已经失效了，对应的提交操作也应该取消”，从而直接阻断了后续的表单提交流程。

为什么之前好用，突然就失效了？ #

大概率是以下几种情况导致的：

• 浏览器版本更新：主流浏览器（比如Chrome、Firefox）偶尔会微调表单提交相关的事件处理规则，之前的版本允许这种“立刻禁用+提交”的操作，新版本收紧了判断逻辑；
• 依赖工具更新：你的站点用了WordPress+Elementor，还有不少其他代码插件，如果最近主题、Elementor或者其他插件有更新，它们的JS代码可能修改了表单的事件监听、默认行为拦截逻辑，和你原来的禁用代码产生了冲突；
• 页面新增代码：如果最近在页面添加了表单验证、全局事件拦截之类的代码，这些逻辑可能改变了事件触发的顺序，导致“立刻禁用按钮”的操作提前阻断了提交流程。

为什么延迟50ms禁用就解决了问题？ #

这个操作本质上是给浏览器留了一小段缓冲时间，让它先完成表单提交的默认行为（比如收集表单数据、发起请求），之后再禁用按钮。这时候按钮的状态变化就不会影响已经启动的提交流程了，同时也能达到防止用户双击重复提交的目的。

更稳妥的优化方案 #

其实还有逻辑更清晰、兼容性更好的写法：先阻止默认提交行为，手动触发表单提交，再禁用按钮，这样能彻底避免浏览器或其他代码的干扰：

document.getElementById('myButton').addEventListener('click', function(e) {
  // 先阻止浏览器默认的提交行为
  e.preventDefault();
  // 获取当前按钮所属的表单
  const form = this.form;
  // 立刻禁用按钮，防止重复点击
  this.disabled = true;
  // 手动提交表单
  form.submit();
  // 5秒后重新启用按钮
  setTimeout(() => {
    this.disabled = false;
  }, 5000);
});

备注：内容来源于stack exchange，提问作者epeleg