如何在Chrome浏览器中避免提交按钮双击导致表单重复提交？

你之前尝试的代码没生效，主要是这几个原因：

• 监听dblclick阻止默认行为没用，因为第一次click已经触发了表单提交，双击的第二次点击只是额外触发，但第一次提交已经发起了
• 混合使用原生JavaScript和jQuery操作同一个按钮，容易导致状态冲突
• 单纯在click事件里禁用按钮，快速双击时两次click事件可能都在按钮禁用前触发，还是会提交两次

下面是靠谱的解决方案：

原生JavaScript实现 #

核心是在表单的submit事件里处理，这是表单提交的统一入口，能拦截所有提交触发（包括按钮点击、回车提交），同时立即禁用按钮防止重复操作：

// 获取表单和提交按钮
const form = document.querySelector('#your-form-id');
const submitBtn = document.querySelector('#buttonid');

form.addEventListener('submit', function() {
  // 立即禁用按钮，防止重复点击
  submitBtn.disabled = true;
  // 可选：修改按钮文字给用户反馈
  submitBtn.textContent = '提交中...';

  // 如果是AJAX异步提交，记得在失败时恢复按钮状态
  // 示例fetch提交代码：
  /*
  fetch(form.action, {
    method: form.method,
    body: new FormData(form)
  })
  .then(res => {
    if (!res.ok) {
      // 提交失败，恢复按钮
      submitBtn.disabled = false;
      submitBtn.textContent = '提交';
    }
    // 提交成功的逻辑，比如跳转或提示
  })
  .catch(err => {
    // 网络错误，恢复按钮
    submitBtn.disabled = false;
    submitBtn.textContent = '提交';
    console.error('提交出错:', err);
  });
  */
});

对应的HTML结构：

<form id="your-form-id" action="/submit-url" method="post">
  <!-- 表单输入项 -->
  <input type="text" name="username" required>
  <button id="buttonid" type="submit">提交</button>
</form>

jQuery实现 #

如果项目依赖jQuery，用统一的jQuery逻辑更稳妥：

$('#your-form-id').on('submit', function() {
  const $btn = $('#buttonid');
  // 如果按钮已经禁用，直接阻止重复提交
  if ($btn.is(':disabled')) return false;

  $btn.prop('disabled', true).text('提交中...');

  // AJAX提交示例
  /*
  $.ajax({
    url: $(this).attr('action'),
    method: $(this).attr('method'),
    data: $(this).serialize()
  })
  .done(function() {
    // 提交成功逻辑
  })
  .fail(function() {
    // 失败后恢复按钮
    $btn.prop('disabled', false).text('提交');
  });
  */
});

重要提醒 #

• 优先监听表单的submit事件，而不是按钮的click事件，这样能覆盖所有提交场景（比如用户按回车提交）
• 同步表单提交（页面会刷新的那种）不需要恢复按钮状态，因为页面刷新后按钮会重置；但异步AJAX提交必须在失败/错误时恢复按钮，不然用户无法重新提交
• 确保按钮的type是submit，不要写成button，不然无法触发表单的submit事件

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