给定一个x，y坐标，我需要找到所有在其下的HTML元素。

Question

给定一个x，y坐标，我需要找到所有在其下的HTML元素。

5

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

(1) 遍历html，构建一个数据结构，跟踪每个元素的x，y位置（x，y - >元素集），然后在需要进行查找时访问此数据结构。不幸的是，这种方法有点繁琐，我正在寻找更好的解决方法。而且，我担心它可能太慢了。

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

(3) 对于IE，有componentFromPoint（x，y），但我找不到其他浏览器中的等效物 - 它只返回最高的元素。

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

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

FYI，到目前为止，我在这里找到的最好的东西是获取基于x＆y位置的DIV id；想知道是否有更现代的东西。

- George Greze

1

我可能有点不好相处 - 你的真正目标是什么？您当前正在调查的解决方案可能有更优雅的解决方案。 - Al.

我们的应用程序允许用户将包含我们内容的div放置在任何网页上。由于底层页面的HTML可能会因我们无法控制的因素（例如，浏览器类型或窗口大小可能会改变单个元素的位置/对齐方式）而呈现不同，因此我们无法将div相对于整个页面的顶部/左侧定位（它们将根据视图环境而出现在不同的位置，这是不好的）。相反，我们需要将div附加到我们知道不会移动的元素（或直接位于div下方的元素）。因此有了这个问题。 - George Greze

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Borgar · Accepted Answer

你可能正在寻找在MSIE、FF3+以及某些形式的Safari和Opera中存在的elementFromPoint方法。同时，也值得一看getBoundingClientRect。将两者结合起来，你就可以开始工作了。

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

这可能看起来有点牵强，但直到现在拖放处理程序一直在计算每个元素的位置。有很多免费的优化了这些内容的拖放处理程序（我猜YUI的代码最易读）。不过这些可能已经过时或者试图支持你不需要的浏览器。