1

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 但用户实际上看到了图像。
是否可以确定图像？

4

1 回答 1

0

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

返回正在调用其 elementFromPoint 方法的文档中的元素

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

<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 处添加了一个监听器，所以我调用了was 触发器的elementFromPointwhenmouseover事件。divImg

我希望这对你有帮助。

更新：仔细查看 的规范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>
于 2013-10-20T17:34:16.943 回答