javascript - 如何在 javascript 和 HTML 中通过坐标在元素内部搜索

Question

假设我有一个 div 元素。它是 500x500 像素。它里面有许多盒子，它们对较大的 div 具有绝对定位。如果我想使用 document.elementFromPoint()，我应该获取主 div 的偏移量，然后添加 px 值以在框中搜索。或者我应该做类似 mainDiv.elementFromPoint() 的事情。

主div是相对定位，其他div是绝对定位。

我一直无法使用 elementFromPoint 查找框中的元素，对于定位的工作方式，是否存在我不理解的地方？

Answer 1

访问并测试此 pen

这会让你明白 document.elementFromPoint();仅适用于文档。

JS

function changeColor(newColor) {
  elem = document.elementFromPoint(250, 150);
  elem.style.backgroundColor = newColor;
}

changeColor('#dd4d39');

HTML

<div class="main">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

CSS

.main {
  width: 500px;
  height: 500px;
  margin: 50px;
  background: #eee;
  display: inline-block;
  position: relative
}

.main div {
  width: 98px;
  height: 98px;
  margin: 1px;
  background: #ddd;
  display: inline-block;
  position: absolute
}

.main div:nth-child(2) {
  top: 0;
  left: 100px;
}

.main div:nth-child(3) {
  top: 100px;
  left: 0;
}

.main div:nth-child(4) {
  top: 0;
  left: 200px;
}

.main div:nth-child(5) {
  top: 200px;
  left: 0;
}

.main div:nth-child(6) {
  top: 0;
  left: 300px;
}

.main div:nth-child(7) {
  top: 300px;
  left: 0;
}

引用 document.elementFromPoint();