Javascript 检测元素前面的元素答案

【问题标题】：Javascript detect elements in front of elementsJavascript 检测元素前面的元素
【发布时间】：2015-02-27 22:59:06
【问题描述】：

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

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

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

那么，考虑到一个元素覆盖另一个元素的方式有多种，用户脚本如何检测覆盖元素的元素？我怀疑遍历整个 DOM 的非常冗长的方法可能避免。

【问题讨论】：

听起来有点像您回答了自己的问题。搜索整个 DOM 可能“昂贵”，但它是可行的。
我正在寻找我可能没有想到的替代策略。可能有一个更快的搜索，甚至是一个 jQuery 函数来检测这种事情。因此问题。
我无法想象 jQuery 函数有什么不同。我的一个想法是让用户脚本发送一个鼠标移动事件，将指针放在所需的对象上，并向文档发送一个点击事件。这样，如果叠加层是动态的，它仍然可以工作。
据我所知，用户脚本无法做到这一点。除非它完全是第三方应用程序。
我不知道为什么你在这个问题上得到了这么多反对意见。这个问题或多或少是我一直希望可以解决的问题的主题。虽然你的回答并没有为我完全挖掘出尤里卡，但它是我进一步搜索的重要坐标。

标签： javascript overlay userscripts

【解决方案1】：

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

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

This stack question关于检查一个元素在屏幕上是否真的可见收到了一个链接到浏览器方法document.elementFromPoint的答案，当给定一些屏幕坐标时，它会返回最顶部的元素，不管不透明度如何，但根据它的@987654324 @ 风格。似乎至少 Firefox 和 Chrome 支持该功能。

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

【讨论】：