如何检查用户是不是可以看到并单击元素？

Posted 2023-03-06

【中文标题】如何检查用户是不是可以看到并单击元素？

【英文标题】：How can I check if the user can see and click on an element?如何检查用户是否可以看到并单击元素？

【发布时间】：2016-04-21 09:06:18

【问题描述】：

使用document.elementFromPoint 函数可以轻松找到页面中所有真正可见和可点击的元素。但是，它会为视口之外的元素返回 null。

那么，如何在整个页面中找到所有可点击和可见的元素？可见元素不仅限于样式。只需考虑一个容器<div>，它现在隐藏在所有子元素后面。因此，父 <div> 不再可见。

那么，您知道如何在页面中找到所有真正可见的元素吗？在上面的例子中，显然“Parent <div>”实际上是不可见的。还有一些其他不可预知的情况，这些元素可能不可见并且样式（display、visibility 等）可能无法指示。

我的最终意图：我想检查一个元素是否真的对最终用户可见和可点击。作为一个示例用例，我想找到用户可能点击的所有可能区域。

【问题讨论】：

这似乎是XY problem。

XY 问题不在于问题是否清楚。我只是想弄清楚，为什么您要为最终用户找到可见元素，以及您是否要解决更广泛的问题。

也许您应该将这个问题改写为：“我如何检查用户是否可以看到某个元素？”

@Xufox 我需要提前找到所有可能的区域。我的用例太复杂了，因为我打算将此结果用于机器学习算法，以进行分析，以比较数千页。 Chuck Le Butt 上面的评论非常准确。

@Kousha 好的，那是一个令人满意的回应。 而且这是一个棘手的问题……

【参考方案1】：

我认为您误解了 domApi 事件背后的基础知识。 在客户端发生的任何事件中都会有气泡和捕获。 你一定见过这样的代码document.addEventListener('click',function(),false),

这意味着使用气泡而不是捕获来处理事件。 所以实际上可点击的 dom 元素与 DOMJs 是否使用气泡或捕获有关

【讨论】：

我不确定你是否已经复习过这个问题。