javascript - 如何使用箭头键移动图像并在 javascript 中获取 div 后面的 id？

Question

我已经成功地用箭头键移动了一张图片，但现在我想在移动的图片后面获取 id。在这里，当图像重叠时，我想要所有的 div id。

html

<div id="box2"></div>
<div id="box3"></div>
<div id="box4"></div>
<div id="box5"></div>
<img id="image" src="http://placekitten.com/69/69" style="position:absolute;left:0; top:0; z-index: 1;" height="15" width="15">

css

body{background:yellow;}
#box2, 
#box3, 
#box4, 
#box5 {
  width: 50px;
  height: 50px;
  background: greenyellow;
  position: absolute;
  top: 50px;
  left: 50px;
  z-index: 2 
}

#box3 {
  top: 150px;
  left: 150px; 
}

#box4 {
  top: 50px;
  left: 250px;
}

Please check demostration link

https://jsfiddle.net/36y0ztn9/1/

Answer 1

根据我上面的评论，

document.elementFromPoint 仅获取最顶部的元素 - mozilla docs ，这里是图像本身，所以使用变通方法，例如将 display:none 或 pointer-events:none 设置为图像，使框成为最顶部的元素并获取盒子 ID。然后重新设置值。

检查这个工作 fiddle ，我对你的 fiddle 做了一些修改:https://jsfiddle.net/y6xsnc8h/1

另请检查此答案以获取可重用函数:https://stackoverflow.com/a/22428553/7314900