如何使iframe具有指针事件:无; 但不是在里面的div？

Question

我有一个继承的iframe,pointer-events: none;但是当我<div>在iframe中插入一个pointer-events: auto;div时,div不会对点击或任何鼠标悬停事件做出反应.

原因是它在iframe里面,<div style="position:fixed;"> 所以它有点像一个小菜单.但我希望用户点击iframe,而不是通过iframe中的链接和div.

是的,它绝对需要保持iframe.

我怎么能绕过这个？我可以绕过这个吗？

这是一个简单的例子:jsfiddle.net/MarcGuiselin/yLo119sw/2

Answer 1

我们想要的不是规范所允许的，至少对于绝对定位的 iframe来说是不允许的。

我们都想做同样的事情：

• 渲染一个容器（通常用于 Chrome 扩展），位于页面上方并填充视口
• Disallow 不允许容器本身捕获指针事件
• 允许容器的子级捕获指针事件

这让我们可以“点击”绝对定位的框，但仍然与其子项交互，这些子项可能是按钮，也可能只是带有悬停事件或其他内容的框。

当且仅当这些盒子共享相同的文档时，我们才能实现这种行为。禁用绝对定位的指针事件会iframe对其所有子项禁用它们。

另一种方法是将内容直接渲染到文档中，即渲染到 Shadow DOM 中以进行样式沙箱。这是实现我们正在寻找的这种行为的唯一方法，也是我之前在尝试重构 iframe 并发现无法以这种方式复制之前解决该问题的方法。

请参阅https://iframe-pointer-events.vercel.app进行演示。