5

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

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

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

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

请注意，该应用程序是作为书签构建的，我无法控制底层的 html——不幸的是，这限制了任何简单的服务器端解决方案。

我愿意使用库（目前在 jquery 上）。

仅供参考，到目前为止，我在这里找到的最好的方法是根据 x & y 位置获取 DIV id；想知道是否有更新的东西。

4

1 回答 1

1

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

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

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

于 2009-08-15T00:52:05.483 回答