js 获取指定坐标下的元素_js 根据坐标获取元素-CSDN博客

`elementFromPoint`的用法

语法：

oElement = document . elementFromPoint ( iX , iY )

参数：
iX :　必选项。整数(Integer)。单位：象素(Pixel)。定位横坐标偏移量。
iY :　必选项。整数(Integer)。单位：象素(Pixel)。定位纵坐标偏移量。

返回值：
oElement :　对象(Element)。返回获取的对象的引用。

说明：
根据横纵坐标值 iX 和 iY 获取对象 oElement 。 oElement 必须支持和响应鼠标事件。
提供的坐标是客户区坐标。客户区的左上角为 (0,0)。
当将此方法用于 Structured Graphics 或 Sprite 对象时，必须设置 MouseEventsEnabled 属性值为 1 。

<script>
function rdl_eventHandle(e){
event.cancelBubble=true;
var oPoint=document.elementFromPoint(event.clientX,event.clientY);
if (oPoint.tagName.toLowerCase()!="li") oCode.innerHTML="请将鼠标移动到项目列表上。";
else oCode.innerHTML="您的鼠标指针现在位于<font color='#FF3300'>"+oPoint.innerText+"</font>上面";
}
document.onmouseover=rdl_eventHandle;
</script>

<ul id=oList style="cursor:default;">
<li>列表项目1
<li>列表项目2
<li>列表项目3
<li>列表项目4
</ul>
<br><div id=oCode>请将鼠标移动到项目列表上。</div>

语法

var element = document.elementFromPoint(x, y);

element 是返回的DOM元素.
x 和 y 是坐标数值, 不需要单位比如px.

示例

<!DOCTYPE html>
<html lang="en">
<head>
<title>elementFromPoint example</title>

<script>
function changeColor(newColor) {
  elem = document.elementFromPoint(2, 2);
  elem.style.color = newColor;
}
</script>
</head>

<body>
<p id="para1">Some text here</p>
<button onclick="changeColor('blue');">blue</button>
<button onclick="changeColor('red');">red</button>
</body>
</html>