在 JavaScript 中是否有可能在指定点获取一个元素，如果它不在顶部但实际上可见

is it possible in javascript get an element at the specified point if it is not on the top but is actually visible

本文关键字：如果 元素 顶部 实际上 一个 有可能 是否 JavaScript 获取      更新时间：2023-09-26

test.html
图像上有 3 个"层"

<img id=image width=200 height=200 src=http://images.all-free-download.com/images/graphicmedium/water_entertainment_motion_picture_165876.jpg>
<div id=dRed style="position:absolute; border: 2px solid red;
  left:50px; top:50px; width:100px; height:100px"></div>
<div id=dGreen style="position:absolute; border: 2px solid green;
  left:70px; top:70px; width:60px; height:60px"></div>
<div id=dBlue style="position:absolute; border: 2px solid blue;
  left:90px; top:90px; width:20px; height:20px"></div>

document.elementFromPoint（100，100） 返回 dBlue，但用户实际看到的是图像。
是否可以确定图像？

正如 Mozilla 文档所说，方法 elementFromPoint：

从文档中返回元素，其元素FromPoint 方法是 被召唤

然后我做了一个使用这个概念的样本。 

<div id="divImg">
  <img id=image width=200 height=200 src="<image_url>">
</div>

我将图像放在div divImg 中。

document.getElementById('divImg').addEventListener("mouseover", function(e){
  console.log(document.elementFromPoint(e.x,e.y).id);
});

我在div 中添加了一个侦听器，因此当触发divImg的事件时mouseover我调用elementFromPoint。

我希望这对你有所帮助。

更新：仔细查看elementFromPoint规范，我看到一个用于禁用元素pointer-events的 css 属性。然后，要仅获取一个元素，您需要设置其他元素，添加 css 属性pointer-events:none

然后你的html将看到：

<img id=image width=200 height=200 src=http://images.all-free-download.com/images/graphicmedium/water_entertainment_motion_picture_165876.jpg>
<div id=dRed style="pointer-events:none; position:absolute; border: 2px solid red;
  left:50px; top:50px; width:100px; height:100px"></div>
<div id=dGreen style="pointer-events:none; position:absolute; border: 2px solid green;
  left:70px; top:70px; width:60px; height:60px"></div>
<div id=dBlue style="pointer-events:none; position:absolute; border: 2px solid blue;
  left:90px; top:90px; width:20px; height:20px"></div>
相关文章：