Javascript检测元素前面的元素

Question

如果覆盖元素是透明的，如何知道一个元素是否在另一个元素前面？这样做的目的是，如果您通过 ID 人为地点击一个页面元素，并且您要确保该元素顶部没有叠加层来确认点击是合成的（因为普通用户必须点击覆盖）。

案例 1：叠加层是可点击元素的子元素检测它：确保没有可点击元素的子元素看起来不寻常。

情况2：叠加层具有绝对位置和更高的z-index以覆盖可点击元素 要检测它： 没有线索！除非您遍历 DOM 中每个元素的边界矩形和 z-index，或者遍历整个 DOM 以寻找特定的样式属性。好贵啊

那么，考虑到一个元素可以覆盖另一个元素的方式的数量，用户脚本如何检测元素覆盖元素？我怀疑这是一个非常冗长的方法可以避免整个DOM。

Answer 1

事实证明有两种方法可以做到这一点，我的意思是有两种方法可以确定任何给定元素是否是最顶部的元素，而不管不透明度如何。

改编自 this blog post post 并使用他们的代码（经过一些修改）可以在任何给定的鼠标位置看到最上面的元素。我修改了他们的代码以查找某个位置任何元素的计算样式 zIndex。这种方法的缺点是它的计算成本很高，因为您要或多或少地查看 DOM 中每个元素的位置。

This stack question 关于检查元素是否在屏幕上真正可见收到了一个链接到浏览器方法 document.elementFromPoint 的答案，当给定一些屏幕坐标时 returns 最上面的元素，无论不透明度如何，但符合其 display 风格。似乎至少 Firefox 和 Chrome.

支持该功能

最后，有两种解决方案可供选择，就可靠性和成本而言，后者可能是最佳解决方案。