仅靠onclick+confirm()不够安全，因其无法区分“取消”与“关闭窗口”，不拦截空格/回车，默认行为执行不稳定，且文案硬编码、难维护；真正防误删需用<dialog>+showModal()控制焦点、拦截ESC和背景点击。
直接用 confirm() 不够安全，alert() 和原生 confirm() 无法区分“点取消”和“关窗口”，也不能阻止空格/回车自动确认；真正防误删，得用 <dialog> + showModal() 控制焦点、拦截 ESC 和 backdrop 点击。
为什么不能只靠 onclick + confirm() 拦删除按钮
常见错误是给删除链接或按钮加 onclick="return confirm('确定？')"，但实际运行中会出问题：
-
<a href="/delete/123">删除</a>的onclick和href执行顺序不稳，某些浏览器（尤其旧 Safari）会跳过确认直接跳转 -
confirm()返回false时，必须显式写event.preventDefault()，仅return false在部分场景下无效 - 用户按空格或回车，
confirm()会被绕过——它不锁焦点，也不拦截键盘默认行为 - 文案无法动态显示影响范围（比如“将删除用户 ID 123 及其全部订单”），业务信息硬编码在 JS 字符串里，难维护
<dialog> 必须满足的三个硬性条件
不是写了 <dialog> 就能当 Modal 用，漏掉任一条件，backdrop 不出现、ESC 不生效、点击外部不关闭：
-
<dialog>元素必须是<body>的**直接子元素**，不能包在<div id="app">或 Vue/React 根容器里 - 不能用
open属性初始化（如<dialog open>），必须用 JS 调用modal.showModal() - Safari ≤15.3 需手动补 CSS：
dialog::backdrop { background: rgba(0,0,0,0.5); }，否则 backdrop 透明且点击无反应
如何绑定删除动作并防止重复提交
用户狂点“确认删除”按钮，弹窗还没关，请求已发两次——关键不是弹窗怎么写，而是交互节奏要卡死：
立即学习“前端免费学习笔记（深入）”；
- 点击删除按钮后，立刻设
button.disabled = true，文字改为“删除中…” - 再调
modal.showModal()；顺序不能反，否则中间有毫秒级时间差 - 确认按钮点击后，先发请求，成功再调
modal.close('confirm')；失败则恢复按钮状态 - 监听
close事件时，用modal.returnValue判断是 'confirm' 还是 'cancel'，别只看事件是否触发
服务端环境标识必须参与前端判断
生产环境才需要二次确认，但绝不能只靠 location.hostname === 'prod.example.com' 做判断——这个值可被伪造，且本地调试时容易误开弹窗：
- 后端模板渲染时，注入真实环境标识，例如：
<input type="hidden" id="env" value="production"> - 前端读取该值，仅当
document.getElementById('env').value === 'production'时才挂载showModal()逻辑 - 测试环境或预发环境即使域名相似，也应设为
staging或preview，避免弹窗干扰验证流程
最易被忽略的是：弹窗内如果有 <input> 或 <button>，<dialog> 必须设 tabindex="-1"，否则焦点离开弹窗时会意外关闭；还有，关闭按钮的 click 事件必须 event.stopPropagation()，否则冒泡到 backdrop 导致刚关又开。
