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

时间:2009-08-14 23:27:27

标签: javascript html position

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

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

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

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

请注意,该应用程序是作为bookmarklet构建的,我无法控制底层的html - 这很遗憾地限制了任何简单的服务器端解决方案。

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

仅供参考,到目前为止,我在这里找到的最好的是Getting DIV id based on x & y position;想知道是否有更新的东西。

1 个答案:

答案 0 :(得分:1)

您可能正在寻找MSIE,FF3 +中存在的elementFromPoint方法以及Safari和Opera中的某种形式。也许值得一看getBoundingClientRect。结合这两者,你应该做生意。

您也可以通过在查找之间保持计算结构来加速方法#1,并且只有在页面上实际发生更改时才重新计算。看看选择器引擎(Sizzle in paticular)如何缓存其查找并在DOM更改时使缓存失效。

这可能看似做作,但计算每个元素的位置是拖放处理程序到目前为止所做的事情。有十几个免费的那些有适当优化的东西(我的预感是YUI将具有最可读的代码)。这些可能已过时或试图支持您不需要/不需要的浏览器。