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

Question

使用document.elementFromPoint功能可以在页面中找到所有真正可见且可点击的元素。但是，它会为视口外的元素返回null。

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

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

我的最终目的：我想检查一个元素是否真的可见并且可以为最终用户点击。作为示例用例，我想查找用户可能单击的所有可能区域。

Answer 1

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

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