HTML5 <dialog> 的 showModal() 默认不阻止事件穿透，因 ::backdrop 的 pointer-events 为 none；需显式设 pointer-events: auto 并配合 inert 或焦点管理实现完整模态隔离。
HTML5 的 <dialog> 元素本身不提供“穿透保护”（即阻止鼠标/触摸事件穿透到背景内容），ShowModal() 方法只是将对话框设为模态并自动添加系统级 backdrop（半透明遮罩），但该 backdrop 默认**不拦截 pointer 事件**——这意味着点击 backdrop 仍可能触发其下方元素的点击、focus 等行为，造成“穿透”。
Backdrop 默认无 pointer-events 阻断
浏览器实现的 <dialog> backdrop 是一个匿名伪元素（如 ::backdrop），其初始样式中 pointer-events 值为 none。这导致点击遮罩层时事件会向下冒泡到 body 或底层可交互元素。
- Chrome/Firefox/Safari 均如此设计，属规范行为，非 bug
- 仅靠
dialog.showModal()无法阻止穿透，必须显式覆盖 backdrop 样式
启用穿透保护：强制 backdrop 拦截事件
通过 CSS 设置 ::backdrop 的 pointer-events: auto，使其捕获所有指针事件，从而阻断穿透：
dialog::backdrop {
background-color: rgba(0, 0, 0, 0.5);
pointer-events: auto; /* 关键：启用事件拦截 */
}- 无需 JavaScript 监听 backdrop 点击，浏览器自动阻止事件继续向下传播
- 若需点击 backdrop 关闭 dialog，可额外监听
dialog元素的click事件并判断event.target === dialog
补充防护：禁用背景交互（可选）
即使 backdrop 拦截了点击，键盘焦点仍可能落在背景表单控件上（如按 Tab 键）。为真正实现“模态隔离”，建议配合以下措施：
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
立即学习“前端免费学习笔记（深入）”；
- 在
showModal()后，用document.body.setAttribute('inert', '')（需 polyfill 支持 inert 属性）或手动tabindex="-1"+aria-hidden="true"禁用背景焦点流 - 监听
keydown，拦截 Escape 外的 Tab / Enter / Space 等可能影响背景的操作 - 关闭 dialog 时，及时移除
inert或恢复背景焦点管理
完整最小可用示例
<dialog id="myDialog">
<p>这是一个模态对话框</p>
<button onclick="this.closest('dialog').close()">关闭</button>
</dialog>
<p><button onclick="myDialog.showModal()">打开对话框</button></p><p><style>
dialog::backdrop {
background-color: rgba(0, 0, 0, 0.4);
pointer-events: auto; /<em> 必须设置 </em>/
}
</style></p><p><script>
const myDialog = document.getElementById('myDialog');
myDialog.addEventListener('click', (e) => {
if (e.target === myDialog) myDialog.close(); // 点击遮罩关闭
});
</script>不复杂但容易忽略：ShowModal 本身不等于防穿透，关键在 ::backdrop 的 pointer-events 控制。
