禁用按钮后仍可能触发点击事件，是因为浏览器在快速点击时会将事件加入队列，而 disabled 属性仅阻止默认交互行为，并不阻断事件注册；需结合运行状态标志（如 isRunning）实现可靠防重。
禁用按钮后仍可能触发点击事件，是因为浏览器在快速点击时会将事件加入队列，而 `disabled` 属性仅阻止默认交互行为，并不阻断事件注册；需结合运行状态标志（如 `isrunning`）实现可靠防重。
在 JavaScript 中，将
回顾原始代码的问题核心：
function click() {
button.disabled = true; // 立即禁用
setTimeout(() => {
delay(); // 长耗时同步计算（阻塞主线程）
button.disabled = false;
}, 0);
}
虽然按钮视觉上已禁用，但由于 delay() 是纯同步循环（无 await/Promise），整个主线程被锁死约数秒；而在此期间，用户多次点击产生的 click 事件并未被丢弃，而是由浏览器事件系统缓存为宏任务（macrotask），并在当前调用栈清空、setTimeout 回调执行完毕后，继续分发尚未处理的点击事件——此时 button.disabled = false 已执行，按钮重新可交互，于是“滞留”的点击又被响应。
✅ 正确解法不是依赖 disabled 的 UI 层防护，而是从逻辑层建立互斥执行机制：
jQuery点击事件遮罩弹出层可移动特效代码
下载
"jQuery点击事件遮罩弹出层可移动特效代码下载。一款jquery弹出层插件制作注册表单点击按钮弹出层表单提交效果，可支持拖到的jQuery弹出层效果。标题、高度、宽度等可以自定义弹出层js插件。
let isRunning = false;
function delay() {
console.log('start');
for (let x = 0; x {
try {
delay();
} finally {
button.disabled = false;
isRunning = false;
}
}, 0);
}
const button = document.getElementById('button');
button.addEventListener('click', handleClick);
? 关键改进点说明：
- isRunning 标志位：作为业务逻辑层面的锁，确保 handleClick 最多并发执行一次；
- finally 块包裹状态恢复：避免 delay() 抛异常导致按钮永久禁用；
- setTimeout(..., 0) 的必要性：让 delay() 推迟到下一轮事件循环执行，使 button.disabled = true 能及时渲染（否则因同步阻塞，禁用效果可能延迟显示）；
- 不依赖 event.preventDefault() 或 stopPropagation()：因为问题根源不在事件传播，而在事件是否应被处理。
⚠️ 注意事项：
- 单纯设置 button.disabled = true 仅阻止表单提交、焦点获取和默认点击反馈，不阻止 click 事件的冒泡与监听器调用；
- 若使用 async/await + Promise 替代 setTimeout，需确保 delay() 返回 Promise 并 await，否则无法真正释放主线程；
- 在现代框架（React/Vue）中，推荐使用 useRef 或 ref 存储 isRunning，避免闭包过期问题。
总结：disabled 是 UI 友好性修饰，而非线程安全开关。构建健壮的防重逻辑，必须结合显式状态管理与合理的异步调度策略。
