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

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 直接子元素，但是对元素高度的每次更改都需要更改位置。

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

或者，也许性能更高，将其从绝对更改为相对并使其占用空间，在第二种情况下它不会显示（从设计角度来看这不太好）。

在这两种情况下，我需要知道该元素（小提琴中的红色元素）是否实际上可见且可单击，且其上方没有任何元素。有什么图书馆可以找到这个吗？

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

Answer 1

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

这不是对您的问题的完整测试，但应该可以帮助您提供部分问题

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

})

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

DEMO