dialog点击遮罩关闭是假象，根本不存在“自动关闭”——原生dialog不响应遮罩点击，所谓自动关闭均由手动监听click并调用close()实现；阻止方式只能是监听click时判断目标是否为dialog或用oncancel="event.preventDefault()"，且需注意Safari坐标fallback及cancel/close事件区别。
dialog点击遮罩关闭是假象，根本不存在“自动关闭”
很多人以为showModal()后点背景就会关，其实浏览器压根没这逻辑——dialog原生不响应遮罩点击，所谓“自动关”全是自己代码加的。如果你发现点了外面就关，那说明你或某个库已经写了click监听并调用了close()。
阻止点击遮罩关闭的正确姿势
不能靠event.stopPropagation()或preventDefault()，这会破坏可访问性（比如屏幕阅读器无法跳转、Esc失效）。真正安全的做法只有两种：
- 监听
click事件，当e.target === dialogEl时，什么也不做（即不调用close()） - 直接在
<dialog></dialog>上写oncancel="event.preventDefault();"，它能阻止 Esc 和遮罩触发的默认关闭行为（但注意：这个属性只对 cancel 事件生效，不影响手动调用close()）
Safari兼容性陷阱：e.target可能永远不是dialog
Safari 15.4–16.3存在bug，click事件的e.target始终是document.body，导致e.target === dialogEl永远为false。此时得fallback判断坐标：
dialog.addEventListener('click', e => {
const rect = dialog.getBoundingClientRect();
if (e.clientX < rect.left || e.clientX > rect.right ||
e.clientY < rect.top || e.clientY > rect.bottom) {
// 点在dialog可视区域外 → 是backdrop点击
// 这里不调用 close()，就实现了“阻止”
}
});
别忽略cancel事件和close事件的区别
点遮罩或按Esc触发的是cancel事件，手动调用close()触发的是close事件。如果你只监听close，就完全漏掉了遮罩和Esc的路径。更麻烦的是：dialog.returnValue在cancel时是空字符串，而close('confirm')后能读到'confirm'——这点常被用来区分关闭来源，但前提是两个事件都监听了。
立即学习“前端免费学习笔记（深入）”；
最易被忽略的细节：阻止遮罩关闭后，cancel事件依然会触发，只是默认行为被抑制了；如果你还依赖它做其他事（比如记录日志），得确保逻辑不被preventDefault()意外干扰。
