javascript - 如何在给定点直接或通过另一个元素的空腔检测哪个元素可见/位于顶部？

Question

假设我有一个 div(背景设置为蓝色)，里面有一个 <h1>。包含一些白色文本。

使用 javascript 函数 elementFromPoint() ，我可以找到当前在给定坐标(x，y)处的元素，但此函数仅检查边界，而不检查实际可见性。例如如果<h1>包含文本 "HELLO" ，然后从“O”内部，背景(蓝色)div 实际上是可见的，但是 elementFromPoint()函数仍然检测到 <h1>在那里标记，因为它只检查 <h1> 的边界框.

是否有任何 javascript 函数/库可以用来检测某个点的实际可见对象？ (我遇到的问题见下图)

Answer 1

使用visible selector :

$(selector).is(':visible');

---

你有这样的 html:

<div><h1></h1></div>

因此，将可见性隐藏到 div 它仍然显示 h1 标签。 demo

如果您将 display none 应用于 div，则 h1 标签将被隐藏。 demo

---

因此，您可能拥有可见性属性而不是显示属性。因此用 display: none;

改变它