当使用原生 HTML popover + ::backdrop 实现模态浮层时，若未显式禁用背景层的指针事件，用户点击模糊 backdrop 区域可能意外触发其下方的链接或按钮——本文提供符合 WHATWG 规范、无需额外 DOM 节点的纯 CSS + JavaScript 标准解法。
当使用原生 html `popover` + `::backdrop` 实现模态浮层时，若未显式禁用背景层的指针事件，用户点击模糊 backdrop 区域可能意外触发其下方的链接或按钮——本文提供符合 whatwg 规范、无需额外 dom 节点的纯 css + javascript 标准解法。
在现代 Web 开发中，HTML <div popover> 是原生、轻量且语义清晰的浮层方案，配合 <code>::backdrop 伪元素可快速实现带毛玻璃效果的遮罩背景。但一个常被忽视的关键细节是：::backdrop 默认不捕获鼠标事件（pointer-events: auto），其本身是“透明”的——点击 backdrop 实际穿透到下层文档流中的可交互元素（如 @#@#@#@#@#@#@#@#@#@0，生产环境建议添加渐进增强降级（如 fallback 到 <code>display: none/block + 手动定位）。
✅ 总结
解决 popover backdrop 下层元素误触问题，核心在于理解 ::backdrop 的事件模型本质：它不是 DOM 节点，而是渲染层抽象，必须显式设置 pointer-events: none 才能阻止事件穿透。配合简洁的事件委托逻辑，即可在零侵入、零额外 DOM、零第三方依赖的前提下，实现专业级的交互健壮性——这正是现代 Web 原生能力“少即是多”设计哲学的典型体现。
.mb_popbox::backdrop {
backdrop-filter: blur(5px);
pointer-events: none; /* 关键：禁用 backdrop 自身的事件响应 */
}
// 方案一：监听全局 click，关闭所有打开的 popover（推荐）
document.addEventListener('click', (e) => {
const target = e.target;
// 若点击位置不在 popover 内部，且当前有打开的 popover，则关闭
if (!target.closest('[popover][popoveropen]') &&
document.querySelector('[popover][popoveropen]')) {
document.querySelectorAll('[popover][popoveropen]').forEach(p => {
p.hidePopover(); // 或设置 popoveropen="" 移除属性
});
}
});
// 方案二：为每个 popover 绑定 backdrop 点击关闭（更精确）
document.querySelectorAll('.mb_popbox').forEach(pop => {
pop.addEventListener('click', (e) => {
// 仅当点击发生在 backdrop 区域（即非 popover 内容区）时关闭
if (e.target === pop || e.target === pop.backdropElement) {
pop.hidePopover();
}
});
});
