如何通过 CSS ::backdrop 停止鼠标事件

Question

我正在探索使用新的 Popover API 将一些 JavaScript 模式替换为本机 HTML 和 CSS 模式，并且我注意到像悬停和单击这样的指针事件正在传播到底层。

::backdrop {
  background: rgba(255, 255, 255, 0.4);
  backdrop-filter: grayscale(40%) blur(3px);
}

    <button popovertarget="mypopover" popovertargetaction="show">
      Show popover
    </button>
    <div id="mypopover" popover>Popover content</div>
    
    <a href="https://google.com"/>Links</a>

当显示

::backdrop

时，如何防止点击传播到底层元素？我尝试过

pointer-events: none

但没有成功。

如果目前不可能，是否需要跟踪浏览器错误来跟踪此功能？

Answer 1

也许这是一个肮脏的选择，但您可以用

popover

中的其他元素来关闭空间：

::backdrop {
  background: rgba(255, 255, 255, 0.4);
  backdrop-filter: grayscale(40%) blur(3px);
}

#mypopover {
  overflow: visible;
  i {
    position: absolute;
    &:first-child {
      inset: -100vmax -100vmax 100%;
    }
    &:last-child {
      inset: 100% -100vmax -100vmax;
    }
  }
  &:before,
  &:after {
    content: '';
    position: absolute;
  }
  &:before {
    inset: 0 100% 0 -100vmax;
  }
  &:after {
    inset: 0 100vmax 0 100%;
  }
}

<button popovertarget="mypopover" popovertargetaction="show">
  Show popover
</button>
<div id="mypopover" popover><i></i>Popover content<i></i></div>

<a href="https://google.com"/>Links</a>