在指定位置获取元素-JavaScript

133

使用Javascript，如何识别给定位置的元素？基本上，我希望编写一个函数，该函数接受两个输入参数（x和y坐标），并在参数所表示的屏幕上的位置处返回html元素。

javascript html dom

— j
source

elementsFromPoint

— Janus Troelsen

Answers:

241

document.elementFromPoint(x, y);

http://dev.w3.org/csswg/cssom-view/#dom-document-elementfrompoint

http://msdn.microsoft.com/zh-CN/library/ms536417%28VS.85%29.aspx

https://developer.mozilla.org/en/DOM/document.elementFromPoint

— 拉胡尔
source

如果也有document.elementsFromPoint-如果元素重叠。

— Seiyria 2014年

我很惊讶这个在5.5版本中的工作原理，而今天却没有被广泛使用。

— 弗拉德·尼古拉（Flad Nicula）2015年

我尝试过这种方法，它根据文档测量位置。我如何相对于父元素使用它？

— Charas

如果在x，y坐标处有一个框架或iframe，则将获得该框架，而不是该位置的元素。

— Elmue 2015年

document.elementsFromPoint在最近启用Webkit和Gecko的浏览器中可用，尽管仍处于实验阶段。参见MDN。

— zopieux

您可以使用本机JavaScript elementFromPoint(x, y)方法，该方法返回视口中坐标x，y处的元素。

请参阅elementFromPoint w3c草案

并且，代码示例：

function changeColor(newColor) {
    // Get the element placed at coords (2, 2)
    var elem = document.elementFromPoint(2, 2);
    // Set the foreground color to the element
    elem.style.color = newColor;
}

<p id="para1">Change this text color using the following buttons.</p>
<button onclick="changeColor('blue');">Blue</button>
<button onclick="changeColor('red');">Red</button>

展开摘要

您可以使用它setInterval()来连续检查元素的悬停事件，但是不建议这样做，.hover(...)而是尝试使用和CSS来增强应用程序性能。

— 安德烈斯·莫拉莱斯（AndrésMorales）
source