最轻量的两级确认方案是使用浏览器原生confirm()，但会阻塞主线程；需分离函数定义与调用，避免控制台报错；异步前置校验必须换自定义modal；modal需预置DOM、事件委托绑定、防重复提交、处理移动端点击穿透及focus干扰。
点击后弹出确认对话框再执行删除
浏览器原生的 confirm() 是最轻量的两级确认方案，但必须注意它会阻塞主线程，用户无法在弹窗出现时操作页面其他区域。适合简单场景，比如管理后台的单条记录删除。
常见错误是直接在按钮上写 onclick="if(confirm('确定删除？')) deleteItem()"，这样一旦用户点取消，deleteItem() 不会执行，但控制台可能报错——如果 deleteItem 未定义，错误发生在确认前，而不是“取消后”。所以函数定义和调用要分离：
function handleDelete() {
if (confirm('此操作不可撤销，确定删除？')) {
fetch('/api/item/123', { method: 'DELETE' })
.then(r => r.ok && alert('删除成功'));
}
}
注意：不要在 confirm() 前加异步逻辑（比如先请求校验权限），它不支持 Promise；想做异步前置检查，就得换自定义弹窗。
用 modal 实现非阻塞式二次确认
当需要显示更多上下文（如待删内容摘要、影响范围提示）或支持键盘操作（ESC 关闭、Enter 确认）时，必须用 DOM modal。关键不是“怎么画弹窗”，而是“怎么绑定事件链”。
立即学习“前端免费学习笔记（深入）”；
容易踩的坑：document.getElementById('delete-btn').addEventListener('click', showConfirmModal) 这样写没问题，但后续确认按钮的监听器如果写成 document.querySelector('#confirm-btn').addEventListener('click', deleteItem)，就可能因 modal 尚未渲染而获取不到元素——尤其用 innerHTML 插入时。
推荐做法：
- 把 modal HTML 写在页面底部（初始
style="display:none"），避免动态插入时机问题 - 确认按钮用委托绑定：
document.body.addEventListener('click', e => { if (e.target.id === 'confirm-btn') deleteItem(); }) - 点击遮罩层或关闭按钮时，清空输入框、重置状态，否则下次打开可能残留上次数据
防止重复点击导致多次提交
用户手快连点两次“确认”，后端可能收到两个 DELETE 请求。这不是 UI 问题，是网络请求层面的防护缺失。
最简单有效的做法是在发起请求前禁用按钮，并恢复其文本提示：
async function deleteItem() {
const btn = document.getElementById('confirm-btn');
btn.disabled = true;
btn.textContent = '删除中...';
try {
await fetch('/api/item/123', { method: 'DELETE' });
location.reload(); // 或更新列表
} finally {
btn.disabled = false;
btn.textContent = '确定删除';
}
}
注意：finally 块必须还原按钮状态，否则失败后按钮永久禁用；如果用 fetch().then().catch()，容易漏掉异常路径下的还原逻辑。
移动端点击穿透与 focus 状态干扰
在 iOS Safari 或部分 Android 浏览器上，modal 出现后点击空白处关闭，再点删除按钮，有时触发不了 click 事件——本质是点击事件被透传到下层元素。根本原因不是 CSS，而是 touchstart 和 click 的触发时机差异。
解决方案很具体：
- 给 modal 外层加
ontouchstart="void(0)"（空处理），能提前捕获 touch 事件，避免穿透 - 确认按钮加
style="-webkit-tap-highlight-color: transparent;"，消除点击高亮延迟 - 不要依赖
:focus样式做交互反馈，移动端 focus 行为不稳定；改用:active或 JS 切 class
真正麻烦的是混合场景：比如 modal 里有输入框，用户聚焦后再点确认按钮，iOS 可能因软键盘收起导致按钮位置偏移，点击落空。这种时候，别硬扛，加个 100ms 的 setTimeout 延迟执行删除更稳。
