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

【问题标题】：Is there a way to see if element is visible, clickable?有没有办法查看元素是否可见、可点击？
【发布时间】：2021-11-15 20:11:13
【问题描述】：

是否有任何方法或 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，因为它必须是一个仅限浏览器的动态应用程序。

【问题讨论】：

@guradio 你显然没有读过这个问题。
我在这里看到了一个可能有帮助的例子：stackoverflow.com/questions/5598953/… ...可能是一种缓慢的方法。希望这会有所帮助。
@LeonBambrick 非常接近这个问题，您可能会发现这很有帮助。 stackoverflow.com/questions/4230029/…

标签： javascript jquery html css

【解决方案1】：

可以使用elementFromPoint() 来测试你想要的元素是否是它的偏移坐标的顶部元素。

这不是针对您的问题的完整测试，但应该可以帮助您了解其中的一部分

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

})

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

DEMO

【讨论】：

【解决方案2】：

对于 puppeteer，我需要这个并使用 @charlietfl 答案来做，但需要更多检查

    await page.waitForFunction(
      (browserSelector) => {
        const browserElement = document.querySelector(browserSelector);
        if (!browserElement) {
          console.log(`Cannot find element "${browserSelector}"`); // eslint-disable-line no-console
          return false;
        }

        const boundingBox = browserElement.getBoundingClientRect();
        if (boundingBox.width === 0) {
          console.log(`Element "${browserSelector}" has no width`); // eslint-disable-line no-console
          return false;
        }
        if (boundingBox.height === 0) {
          console.log(`Element "${browserSelector}" has no height`); // eslint-disable-line no-console
          return false;
        }

        const clickTarget = document.elementFromPoint(
          boundingBox.left + boundingBox.width / 2, // Horizontal center
          boundingBox.top + boundingBox.height / 2, // Vertical center
        );
        if (!browserElement.contains(clickTarget)) {
          console.log(`Element "${browserSelector}" is obstructed`); // eslint-disable-line no-console
          return false;
        }
        return true;
      },
      {}, // No options for waitForFunction
      selector,
    );

【讨论】：