给定x,y坐标,我需要找到它下面的所有html元素

Question

我正在构建一个应用程序,我反复需要获取位于特定位置(相对于视口的x,y)的html元素列表.我正在考虑以下方法,但没有一个令人满意:

(1)浏览html,构建一个数据结构,跟踪每个元素(x,y - >元素集)的x,y位置,然后在需要进行查找时访问该数据结构.不幸的是,这种方法有点麻烦,我正在寻找一种更好的方法来解决这个问题.另外,我担心这可能太慢了.

(2)我正在考虑的一个可能更好的方法是暂时添加一个捕获所有悬停事件的顶级事件处理程序,在特定位置伪造鼠标悬停,然后删除处理程序,但看起来这样会只返回最顶层的元素(例如,如果特定位置上有一堆绝对位置div,我认为它只会返回具有最高z-index的那个,而我需要所有,尽管我不确定).

(3)对于IE,有componentFromPoint(x,y),但我在其他浏览器中找不到等价物 - 它只返回最顶层的元素.

请注意,该应用程序是作为书签建立的,我无法控制底层的HTML - 这不幸地减少了任何简单的服务器端解决方案.

我愿意使用库(目前在jquery上).

仅供参考,到目前为止,我在这里找到的最好的是基于x&y位置获得DIV id ; 想知道是否有更新的东西.

Answer 1

您可能正在寻找elementFromPointMSIE、FF3+ 中存在的方法以及 Safari 和 Opera 中以某种形式存在的方法。也许也值得一看getBoundingClientRect。将两者结合起来，您就应该开展业务了。

您还可以通过在查找之间保留计算的结构并仅在页面上实际发生更改时重新计算它来加速方法#1。看一下选择器引擎（特别是 Sizzle）如何缓存其查找并在 DOM 更改时使缓存过期。

这可能看起来很做作，但计算每个元素的位置是拖放处理程序迄今为止所做的事情。有十几个免费的软件对这些东西进行了适当的优化（我的预感是 YUI 将拥有最可读的代码）。这些可能已经过时，或者试图支持您不想要/不需要的浏览器。