javascript - 如何找到位于给定 (X,Y) 位置的 DOM 节点？（命中测试）

Question

我有 HTML 文档中某个点的坐标 (X,Y)。如何确定这些坐标处的 DOM 节点？

一些想法：

• 是否有一个我错过的 DOM 命中测试函数，它需要一个点 (X,Y) 并在那里返回 DOM 元素？
• 有没有一种有效的方法来遍历 DOM 元素树以找到包含元素？由于绝对定位的元素，这似乎很棘手。
• 有没有办法在给定的（X，Y）位置模拟事件，以便浏览器最终创建一个具有指向元素的指针的事件对象？

（背景：我将 Qt 的 QWebView 嵌入到本机应用程序中。我正在尝试根据鼠标悬停的 DOM 节点来改变 Qt 小部件提供的上下文菜单，但 Qt 4.5 无法对 DOM 元素进行测试，尽管该功能将在 4.6 中推出。所以我希望我可以将坐标放入 Javascript 并使用 DOM API 进行命中测试。）

谢谢！

Answer 1

只要您的用户不使用旧版本的 Safari、Chrome 或 Opera，您就很幸运：使用document.elementFromPoint(x, y)（MSDN 参考、Mozilla 参考、QuirksMode 文章）：

返回文档中的元素...它是位于给定点下方的最顶层元素。

如果您需要支持较旧的浏览器，除了您的建议（遍历整个 DOM，查看元素位置和大小并查看它们是否封装了您的 (x, y)）之外，我想不出很多选择。

我不认为事件模拟会起作用，但这是一个有趣的想法。我对事件调度的理解是您指定事件的目标，这正是您首先要找出的。

Answer 2

document.elementFromPoint(x,y)

在此处记录Firefox 3 和此处用于 IE，但请参阅quirksmode了解跨浏览器差异。

Answer 3

在 IE 中存在document.body.componentFromPoint(x,y)。不知道有没有跨浏览器的实现。

Answer 4

这可能不是最好的解决方案，但是您可以从查找包含 x 和 y 位置的祖先节点的坐标开始遍历 dom 树，然后快速到达包含您的坐标的叶节点。要以跨浏览器的方式获取节点的位置，您可以查看 JS 工具包。我用过的一种是dojo。看看这里的 dojo._getMarginBox

Answer 5

您可以为此使用 jQuery。我会将所有需要的 dom 元素绑定到 click 事件，这将在 click 和mouse position上为我提供适当的 dom 对象。