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

Question

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

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

那么,您是否知道如何在页面中找到所有真正可见的元素？在上面的例子中,显然"父<div>"实际上是不可见的.还有一些其他不可预知的情况下这些元素可能无法看到和样式(display,visibility,等)可能不表明它.

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

Answer 1

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

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