javascript - 有没有办法查看元素是否可见、可点击？

Question

是否有任何方法或 JavaScript 库可以查看元素是否真的完全可见？例如，假设您需要在某些元素之间显示一些 UI 按钮，并且不占用页面上的更多空间，如本例所示: https://jsfiddle.net/akyh7e5f/

html:

<div style="width:50%; display:inline-block">
<div class="a">
<div>
Some content here.
</div>
<div class="inserter">
insertme
</div>
</div>
<div class="b">
 <div>
 some other content
 </div>
</div>
</div>

<div style="width:49%; display:inline-block">
<div class="a" style="z-index:1">
<div>
Some content here.
</div>
<div class="inserter">
insertme
</div>
</div>
<div class="b" style="z-index:2">
 <div>
 some other content
 </div>
</div>
</div>

CSS:

.a {
  height:80%;
  background: blue;
  position:relative;
}
.b {
  padding:30px;
  background:green;
  position:relative;
}

.inserter {
  position:absolute; z-index:9999;
  left:50%; margin-left:-20px;
  background: red;
}

在一种情况下，该元素在内部并显示，在另一种情况下，它在下方，因为其他一些元素的 zindex 比 insertme 元素的容器多。我可以使它成为 body > element direct child，但随后对元素高度的每次更改都需要更改位置。

您可以将红色元素向上移动一个 dom 元素，直到它在该元素之后并且可见，然后对顶部/左侧进行一些计算，

或者，也许更高效，将它从绝对更改为相对并使其占用空间，在第二种情况下它不会显示(从设计 Angular 来看不是那么好)。

在这两种情况中的任何一种情况下，我都需要知道元素(此 fiddle 中的红色元素)是否实际上可见且可点击且其上方没有元素。有没有图书馆可以找到这个？

请不要回复 jsfiddle 的具体建议 - 这是一个最小的测试用例，假设许多不同的样式可以以任何方式为页面设置主题，更不用说用户添加的样式了。另外，请不要提及 Selenium，因为它必须是仅限浏览器的动态应用程序。

Answer 1

可以使用elementFromPoint()测试您想要的元素是否是其偏移坐标处的顶部元素。

这不是对您的问题的完整测试，但应该可以帮助您解决问题

$('.inserter').each(function(){
   var offset= $(this).offset();
   var topEl = document.elementFromPoint(offset.left, offset.top);
   console.log(topEl == this)

})

请注意，我只检查了左上角，您可能想看看是否显示了比那个 Angular 更多的内容。

DEMO