如何防止点击CSS Popover背景遮罩时触发下方的按钮或链接？

嘿，这个问题我之前也碰到过！原生CSS Popover的背景遮罩（backdrop）点击事件确实会穿透到下方的元素，不小心就触发了链接或按钮，挺闹心的。不过完全不用搞那种额外加全屏div的 workaround，有两个更标准、更优雅的解决办法：

方法一：监听Popover点击事件，阻止遮罩区域的事件传播 #

原生Popover的背景遮罩是伪元素::backdrop，它不属于DOM节点，但点击遮罩时，触发的点击事件目标会指向Popover元素本身（而点击Popover内部内容时，目标是内部的子元素）。我们可以利用这一点，在Popover的点击事件里判断点击区域，阻止遮罩点击的事件向下传播：

const popover = document.getElementById('menu_topics');

popover.addEventListener('click', (e) => {
  // 判断点击的是遮罩区域（即直接点击Popover元素本身）
  if (e.target === popover) {
    // 阻止事件继续向下传递，避免触发下方的链接/按钮
    e.stopPropagation();
    // 原生Popover点击遮罩会自动关闭，这里不需要手动调用hide()
  }
});

这个方法的好处是只针对Popover本身处理，不会影响页面其他元素的交互逻辑。

方法二：利用pointer-events控制页面点击权限 #

另一种思路是，当Popover打开时，让页面其他元素暂时无法接收点击事件，只允许Popover本身可以响应点击：

const popover = document.getElementById('menu_topics');

// 监听Popover的显示/隐藏状态变化
popover.addEventListener('toggle', () => {
  if (popover.matches(':popover-open')) {
    // Popover打开时，禁止body内所有元素接收点击
    document.body.style.pointerEvents = 'none';
    // 单独允许Popover接收点击
    popover.style.pointerEvents = 'auto';
  } else {
    // Popover关闭后，恢复body的点击权限
    document.body.style.pointerEvents = '';
    popover.style.pointerEvents = '';
  }
});

// 额外添加：点击页面其他区域也能关闭Popover
document.addEventListener('click', (e) => {
  if (popover.matches(':popover-open') && !popover.contains(e.target)) {
    popover.hide();
  }
});

这个方法更彻底，不管是点击遮罩还是页面其他区域（只要不是Popover内部），都不会触发下方元素的交互，同时完美实现了“点击任何外部区域关闭Popover”的需求。

为什么不用额外的全屏div？ #

你提到的全屏div workaround确实能解决问题，但原生Popover本身已经提供了遮罩机制，额外添加div会增加DOM复杂度，而且需要手动管理显示/隐藏逻辑，违背了使用原生组件的初衷。上面两种方法都是基于原生API的标准实现，更简洁优雅。

备注：内容来源于stack exchange，提问作者Peter