css - 如何使具有高 z-index 的元素允许在下面的元素处发生点击事件？

Question

我正在开发一个 chrome 扩展。它基本上是一个位于可见屏幕上部的工具栏，作为 Iframe 添加到页面。

我的问题是我将它设置为较高的 z-index 以确保栏出现；然后它下面的元素(在 Iframe 下面)变得不可点击(假设我得到了一 block 透明的 iFrame，允许用户看到它下面的元素)。其他 Stack Overflow 问题没有解决我的问题，因为他们认为我可以控制上部和下部元素，而我没有控制下部元素。

Answer 1

如果只有 iframe 的某些部分应该让点击通过，那么在 iframe 的 onclick 处理程序中通过 postMessage 向页面的内容脚本发送消息。使用点击点坐标并在内容脚本的 document.addEventListener 中为该消息使用 querySelectorAll(':hover') or document.elementFromPoint while temporarily hiding the iframe找到被点击的元素，然后通过 dispatchEvent 向该元素发送一个新的 click 事件(加上原始文档中 iframe 的左上角偏移量)。