如何找到位于给定(X,Y)位置的DOM节点? (命中测试)

时间:2009-10-15 00:57:37

标签: javascript qt dom hittest

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

一些想法:

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

(背景:我将Qt的QWebView嵌入到本机应用程序中。我正在尝试根据鼠标结束的DOM节点改变Qt小部件提供的上下文菜单,但是Qt 4.5无法测试到DOM元素,虽然该功能将在4.6中出现。所以我希望我可以将坐标放到Javascript中并使用DOM API进行命中测试。)

谢谢!

5 个答案:

答案 0 :(得分:24)

只要您的用户没有使用旧版本的Safari,Chrome或Opera,您就很幸运:使用document.elementFromPoint(x, y)MSDN refMozilla ref,{{3} }):

  

返回文档中的元素   ......这是最重要的元素   在给定的点下。

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

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

答案 1 :(得分:1)

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

答案 2 :(得分:1)

这可能不是最佳解决方案,但您可以遍历dom树,首先查找包含x和y位置的祖先节点的坐标,然后快速到达包含坐标的叶节点。要以跨浏览器的方式获取节点的位置,您可以查看JS工具包。我使用的是道场。看一下dojo._getMarginBox here

答案 3 :(得分:1)

document.elementFromPoint(x,y)

针对Firefox 3记录here,针对IE记录here,但请参阅quirksmode了解跨浏览器差异。

答案 4 :(得分:0)

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