给定一个x，y坐标，我需要找到它下面的所有html元素 [英] Given an x,y coordinate, I need to find all html elements underneath it
问题描述
我正在构建一个应用程序，我需要重复获取位于特定位置（例如，相对于视口的x，y）的html元素列表。我正在考虑以下方法，但没有一个能满足要求：
（1）通过html，建立一个数据结构，记录x，y的位置每个元素（x，y - >元素集），然后在需要查找时访问这个数据结构。不幸的是，这种方法有点麻烦，我正在寻找更好的方法来解决这个问题。另外，我担心它可能会太慢。
（2）我正在考虑的一种可能更好的方法是暂时添加捕获所有悬停的顶级事件处理程序事件，在特定位置假设鼠标悬停，然后删除处理程序，但它看起来像只会返回最上面的元素（例如，如果在特定位置上有一堆绝对位置div ，我认为它只会返回Z指数最高的那个，但我需要所有的，但我不确定）。
（3）对于IE，是componentFromPoint（x，y），但我无法在其他浏览器中找到等价物 - 它只返回最顶端的元素。
请注意，应用程序是以书签的形式构建的，我无法控制底层html - 这种情况不利于简化服务器端解决方案。
我愿意使用库（目前对于jquery）。
仅供参考，到目前为止，我在这里找到的最好的是根据x& y位置;想知道是否有更新的东西。
您可能正在寻找 elementFromPoint 方法存在于MSIE，FF3 +和Safari和Opera中的某些表单。也许值得一看 getBoundingClientRect 。将这两者结合起来，你就可以开展业务了。
你也可以通过在查找之间保持计算结构并在实际更改时重新计算结果来加速方法1发生在页面上。看看选择器引擎（Sizzle in paticular）如何缓存它们的查找并在DOM发生变化时使缓存过期。
这看起来似乎很有意思，但计算每个元素的位置就是拖放处理程序到目前为止所做的工作。有十几个免费的，有这个东西正确优化（我的直觉是，YUI的将有最可读的代码）。这些可能会过时或尝试支持您不需要/不需要的浏览器。
I am building an app where I repeatedly need to get lists of html elements sitting under a specific location (x,y relative to the viewport, e.g.). I am considering the following approaches, but none are satisfying:
(1) Go through the html, build a data-structure that keeps track of the x,y position of every element (x,y -> set of elements), and then access this data-structure when I need to do a lookup. Unfortunately, this approach is a bit cumbersome and I am looking for a better way to solve this problem. Plus, I fear it may be way too slow.
(2) A probably better approach I am considering is to temporarily add a top-level event handler that captures all hover events, to fake a mouse-hover at the particular position, and then to remove the handler, but it looks like this will only return the top-most element (e.g., if there are a bunch of absolute-position divs over a particular location, I think it will only return the one with the highest z-index, whereas I need all, although I am not sure).
(3) For IE, there is componentFromPoint(x, y), but I can't find an equivalent in other browser -- that and it only returns the top-most element.
Note that the app is built as a bookmarklet and I have no control over the underlying html -- this unfortunately curtails any easy server-side solutions.
I am willing to use libraries (currently on jquery).
FYI, so far the best I have found here is Getting DIV id based on x & y position; wondering if there is something more up-to-date.
You might be looking for the elementFromPoint method that exists in MSIE, FF3+ and in some form in Safari and Opera. It may be also worth taking a look at getBoundingClientRect. Combine the two and you should be in business.
You might also be able to speed up approach #1 by keeping the calculated structure between lookups and only recalculate it when changes actually occur on the page. Take a look at how selector engines (Sizzle in paticular) cache their lookups and expires the cache when the DOM changes.
It may seem contrived, but calculating every element's position is what drag-and-drop handlers have been doing up until now. There are a dozen free ones out there that have this stuff properly optimized (my hunch is that YUI's will have the most readable code). These may be dated though or trying to support browsers that you don't want/need to.
这篇关于给定一个x，y坐标，我需要找到它下面的所有html元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
