原生 元素会自动渲染一个不可见的 ::backdrop 层，但该伪元素无法直接绑定事件；正确做法是监听 dialog 元素自身的 click 事件，并通过 e.target === e.currentTarget 判断点击是否发生在 backdrop 区域，从而安全触发 close()。
原生 `
在使用 HTML 原生 <dialog></dialog> 实现模态框时，浏览器会在顶层自动插入一个半透明背景层（即 ::backdrop），用于视觉隔离和交互遮罩。但需明确：CSS 伪元素（如 ::backdrop、::before、::after）无法被 JavaScript 选中或直接附加事件监听器——document.querySelector('dialog::backdrop') 返回 null，尝试对其调用 addEventListener 必然报错。
因此，实现“点击背景关闭弹窗”的核心思路是：利用事件冒泡机制，在 <dialog></dialog> 元素上监听 click，再精准区分点击目标：
- 当用户点击 backdrop（即 dialog 的空白背景区域），事件对象的
e.target指向 dialog 本身； - 当用户点击 dialog 内部子元素（如按钮、视频、表单等），
e.target是具体子节点，而非 dialog。
据此，我们只需在 click 回调中判断 e.target === e.currentTarget（即事件未冒泡、原始触发点就是 dialog 自身），即可安全调用 modal.close()：
const modal = document.querySelector(".video-modal");
const video = document.querySelector(".video-modal video");
// 打开模态框
document.querySelector(".open-modal").addEventListener("click", () => {
modal.showModal();
});
// 关闭时暂停视频
modal.addEventListener("close", () => {
video.pause();
});
// ✅ 关键：监听 dialog 自身的 click，并过滤内部点击
modal.addEventListener("click", (e) => {
if (e.target === e.currentTarget) {
e.stopPropagation(); // 阻止可能的意外冒泡（虽通常非必需）
modal.close();
}
});⚠️ 注意事项：
- 不要尝试用
dialog:-internal-dialog-in-top-layer::backdrop等私有伪类选择器——它们非标准、不可靠，且无法挂载事件； -
e.stopPropagation()在此处主要用于语义清晰，防止极端嵌套场景下父级监听器干扰，实际多数情况下可省略； - 确保
<dialog></dialog>元素没有设置pointer-events: none或opacity: 0等导致失焦的样式，否则 backdrop 点击将无响应； - 若需兼容旧版 Safari（不支持
<dialog></dialog>），应引入 polyfill（如dialog-polyfill）并统一处理 backdrop 逻辑。
总结：::backdrop 是纯渲染层，交互逻辑必须落在 <dialog></dialog> 容器上。掌握 target === currentTarget 这一模式，是高效、健壮地实现 backdrop 点击关闭的关键技巧。
