如何在数据处理及DOM更新期间禁用排队的点击事件？

问题的核心是：浏览器会将按钮禁用状态下的点击事件存入事件队列，当按钮恢复启用后，队列中的事件会立即执行。要彻底避免这种情况，可采用以下几种思路：

1. 添加全局点击拦截器 #

在上传开始时，给所有按钮绑定一个优先执行的点击拦截函数，直接阻止事件的传播与默认行为，上传完成后移除该拦截器：

// 上传启动时调用
function blockAllButtonClicks() {
  const clickBlocker = (e) => {
    e.stopImmediatePropagation();
    e.preventDefault();
  };
  // 给所有按钮绑定拦截器
  $("button").on("click", clickBlocker);
  // 返回移除函数，方便后续清理
  return () => $("button").off("click", clickBlocker);
}

// 在上传流程中使用
const unblockClicks = blockAllButtonClicks();

fetch(/* 你的请求逻辑 */)
  .then(/* 解析CSV、生成图表 */)
  .finally(() => {
    // 上传完成后移除拦截器
    unblockClicks();
    // 恢复按钮视觉状态
    $("#my-button").prop("disabled", false);
  });

stopImmediatePropagation()能确保这个拦截器优先于按钮原有的点击事件执行，彻底阻断后续逻辑。

2. 用全局状态标记阻断事件逻辑 #

在所有按钮的点击事件开头增加状态判断，当处于上传中时直接终止逻辑执行：

let isUploadInProgress = false;

// 上传处理函数
function handleUpload() {
  isUploadInProgress = true;
  $("#my-button").prop("disabled", true);

  fetch(/* 请求逻辑 */)
    .then(/* 数据处理与图表生成 */)
    .finally(() => {
      isUploadInProgress = false;
      $("#my-button").prop("disabled", false);
    });
}

// 给所有按钮绑定带状态判断的点击事件
$("button").on("click", function(e) {
  if (isUploadInProgress) {
    e.preventDefault();
    e.stopPropagation();
    return false;
  }
  // 执行按钮原本的业务逻辑
});

这种方式从业务逻辑层面阻断，无论浏览器是否缓存事件，只要上传状态为true，就不会执行后续代码。

3. 添加UI遮罩层阻止点击交互 #

上传期间在页面顶部添加一个全屏透明遮罩，物理阻断用户的点击操作，从根源上避免事件被触发：

/* 遮罩层样式 */
.upload-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 9999;
  background-color: transparent;
}

// 上传开始时添加遮罩
$("body").append('<div class="upload-overlay"></div>');

fetch(/* 请求逻辑 */)
  .then(/* 处理流程 */)
  .finally(() => {
    // 上传完成后移除遮罩并恢复按钮状态
    $(".upload-overlay").remove();
    $("#my-button").prop("disabled", false);
  });

这个方案对用户体验更友好，用户能直观感受到当前操作不可用，不会出现点击无反馈的困惑。

4. 替换并恢复按钮的事件绑定 #

先保存按钮原有的点击事件处理函数，上传期间替换为空函数，完成后恢复原有绑定：

// 上传开始前保存原事件
const buttonElement = $("#my-button")[0];
const originalHandlers = $._data(buttonElement, "events")?.click?.map(item => item.handler) || [];

// 替换为空事件
$("#my-button").off("click").on("click", () => {});

fetch(/* 请求逻辑 */)
  .then(/* 处理流程 */)
  .finally(() => {
    // 清空临时事件，恢复原有绑定
    $("#my-button").off("click");
    originalHandlers.forEach(handler => {
      $("#my-button").on("click", handler);
    });
    $("#my-button").prop("disabled", false);
  });

注意：此方法依赖jQuery内部的$._data方法，不同版本可能存在兼容性差异，需测试后使用。

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