如何找到给定（X，Y）位置处的DOM节点？（命中测试）

Question

24

我在HTML文档中有一个点的坐标（X，Y），如何确定该坐标处的DOM节点？

一些想法：

（背景：我正在将Qt的QWebView嵌入本地应用程序中。我试图根据鼠标悬停在其中的DOM节点来变化Qt小部件提供的上下文菜单，但是Qt 4.5无法进行DOM元素的命中测试，尽管该功能将在4.6中实现。因此，我希望能够将坐标传递到JavaScript中，并在那里使用DOM API进行命中测试。）

谢谢！

- Geoff

5个回答

2

document.elementFromPoint(x,y)

在Firefox 3中这里有记录，在IE中这里有记录，但是请参阅quirksmode以了解跨浏览器差异。

- wdebeaum

1

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

- Rodrigo

1

componentFromPoint不会返回节点。 - Murali VP

1

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

- Murali VP

0

你可以使用jQuery来实现。我会将所有需要的dom元素绑定到点击事件上，这样在点击时就可以得到相应的dom对象以及鼠标位置。

- petrpetrov

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

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

- Crescent Fresh · Accepted Answer

只要你的用户不使用旧版的Safari、Chrome或Opera，那么你就有福了：使用document.elementFromPoint(x, y)（MSDN参考文献、Mozilla参考文献、QuirksMode文章）：

返回文档中位于给定点下方的最上层元素。

如果您需要支持旧版本的浏览器，我想不出许多选项，除了您提出的方法（遍历整个DOM，查看元素位置和大小，并查看它们是否封装了您的（x，y））。

我认为事件模拟不会起作用，但这是一个有趣的想法。我的理解是，事件分派指定了事件的目标，这正是您首先要找到的内容。