获取指定位置的元素 - JavaScript

Question

使用Javascript如何识别给定位置的元素？基本上我正在寻找一个带有两个输入参数(x和y坐标)的函数,并返回由参数表示的屏幕位置的html元素.

Answer 1

document.elementFromPoint(x, y);

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

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

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

Answer 2

您可以使用本机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来增强应用程序性能.

Answer 3

要获取相对于视口特定位置的最顶层元素，document.elementFromPoint(x, y)可以使用。

要获取特定位置处所有元素的数组，请使用。document.elementsFromPoint(x, y)

在这两种情况下，x是相对于视口左侧的水平坐标，y是相对于视口顶部的垂直坐标。