如何通过CSS ::backdrop阻止Popover API模态框的鼠标事件穿透？

你遇到的问题根源在于：Popover API的::backdrop默认不拦截鼠标事件，导致底层元素能响应点击、悬停等操作。以下是具体的解决方法：

修复方案：为::backdrop设置pointer-events: auto #

默认状态下，::backdrop的pointer-events属性值为none，鼠标事件会直接穿透它到达底层元素。只需修改CSS，让backdrop具备拦截事件的能力：

::backdrop {
  background: rgba(255, 255, 255, 0.4);
  backdrop-filter: grayscale(40%) blur(3px);
  pointer-events: auto; /* 核心：让backdrop拦截鼠标事件 */
}

设置后，当popover显示时：

• 点击backdrop区域会触发popover的默认关闭行为（符合模态框的常规交互逻辑）
• 底层元素不会再收到任何鼠标事件

额外注意点 #

• 不要给popover元素本身设置pointer-events: none，否则popover内容区域的交互（比如点击内部按钮、输入框）会失效。默认情况下popover的pointer-events为auto，无需额外修改。

潜在浏览器问题 #

如果上述方案无效，可能是浏览器对Popover API的实现存在bug：

• 目前主流浏览器（Chrome 114+、Edge 114+、Safari 16.4+）已支持Popover API，但部分早期版本可能存在::backdrop事件处理的异常。
• 可前往对应浏览器的官方bug追踪平台，搜索“Popover API backdrop pointer events”相关条目，查看是否有已上报的同类问题或修复进展。

内容的提问来源于stack exchange，提问作者anthonyryan1