confirm()会阻塞主线程且现代浏览器限制严格，应改用promise封装的自定义弹窗组件实现：遮罩层+可聚焦按钮+键盘支持+异步返回。
JavaScript confirm() 怎么用才不会阻塞页面交互
confirm() 是浏览器原生弹窗，点击确定返回 true，取消返回 false。但它会阻塞主线程，用户无法切换标签页、无法操作其他元素，现代项目里基本只用于临时调试或极简后台。
常见错误是直接写在事件里却不处理返回值：
button.onclick = () => {
confirm('确定删除？'); // ❌ 没接返回值，点了“取消”也照样执行后续逻辑
doDelete(); // 这行永远会执行
};
正确写法必须用返回值控制流程：
- 把
confirm()放在条件判断里，只在返回true时执行关键操作 - 避免在循环、定时器、表单提交默认行为中直接调用，容易引发重复弹窗或逻辑错乱
- 移动端 Safari 对
confirm()支持不稳定，部分 iOS 版本会静默忽略
为什么 confirm() 在 Vue/React 里经常“点不动”
框架的响应式更新和事件机制会让 confirm() 的同步阻塞特性暴露问题。比如在 Vue 的 @click 中调用，若同时绑定了 .prevent 或 .stop 修饰符，但没等 confirm() 返回就提前触发了其他响应逻辑，就会看起来“没反应”。
典型场景：
- React 中用
useState更新状态后立刻调用confirm()，但状态未同步渲染，用户看到的仍是旧 UI - Vue 3 的
setup里用ref控制按钮禁用，但confirm()弹出时按钮仍可点，导致重复提交 - 所有框架里都不要在异步回调（如
fetch().then()）里调用confirm()，它不是 Promise，无法await
不依赖原生弹窗，怎么手写一个轻量 confirm 组件
真正可控的方式是用 DOM 模拟：遮罩层 + 内容区 + 两个按钮，状态由 JS 控制显隐。重点不是样式，而是行为对齐原生语义：
- 按
Enter触发“确定”，Escape触发“取消”，Tab可在按钮间切换（需加tabindex） - 弹出时自动
document.body.style.overflow = 'hidden'，防止背景滚动 - 点击遮罩层默认等同于点击“取消”，除非显式配置
maskClosable: false - 返回值用 Promise 包装，方便
async/await调用：const ok = await myConfirm('真的要删？')
最小可用实现只需 20 行左右 JS，不需要任何第三方库。关键是把 resolve/reject 挂在两个按钮的 click 处理器上，而不是靠定时器或轮询。
Chrome 95+ 和 Safari 16.4 后，confirm() 被限制的细节
现在浏览器对非用户手势触发的 confirm() 会直接静默失败（返回 false），比如：
- 在
setTimeout(() => confirm(...), 100)中调用 - 在
fetch成功回调里调用（即使该 fetch 由按钮触发） - 在
input的change事件里调用，但用户是通过粘贴触发的 change
判断是否为有效手势，看 event.isTrusted 是否为 true，且事件链没被中断。所以生产环境务必确保 confirm() 直接挂在用户可点击的元素上，中间不要穿插异步跳转。
真正难处理的是嵌套确认场景——比如“确认删除”后再弹“是否同步清空回收站”。这种必须拆成两层 Promise 链，不能靠两次 confirm() 堆叠，否则第二层大概率被拦截。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
