主页 / 问题 / 1436184
Accepted
user503400
Asked:2022-08-04 21:49:43 +0000 UTC2022-08-04 21:49:43 +0000 UTC

你能帮我理解 elementFromPoint() 方法吗？

  • 772

问题是有两个 div，一个比另一个大。大的一直在移动，想知道小的什么时候会在大的坐标区。我使用这段代码，但输出到处都是空的。为什么会这样。

let boxBig = document.querySelector(".boxBig ");
let y = 50;
let x = 20;
setInterval(() => {
  boxBig.style.top = (parseInt(boxBig.style.top) || 0) + y + "px";
  let elem = document.elementFromPoint(y, x);
  let res = elem.closest(".boxSmall");
  console.log(res);
}, 1000);
.boxBig {
  width: 100px;
  height: 100px;
  top: 50px;
  padding: 2px;
  border: 5px solid black;
  position: absolute;
}

.boxSmall {
  border: 5px solid rgb(231, 26, 91);
  position: fixed;
  width: 40px;
  height: 40px;
  top: 400px;
  left: 30px;
}
<div class="boxBig"></div>
<div class="boxSmall "></div>

javascript html

1 个回答

  1. Best Answer

    问题是坐标不正确：

    1. 交换x和y
    2. 测试小方块外的同一个点，所以结果总是null。

    要解决这个问题，只要改变被检查的点和大方块的坐标就可以了，并且选择这样的坐标，使点在移动时仍然可以进入小方块内

    let boxBig = document.querySelector(".boxBig ");
let current = document.getElementById("current");
let y = 50;
let x = 40;

current.style.top = `${y - 1 + 15}px`;
current.style.left = `${x - 1 + 5}px`;


let timer = setInterval(() => {
  let currentY = (parseInt(boxBig.style.top) || 0) + y;
  current.style.top = `${currentY - 1 + 15}px`;
  current.style.left = `${x - 1 + 5}px`;

  boxBig.style.top = currentY + "px";
  let elem = document.elementFromPoint(x + 5, currentY + 15);
  let res = elem;
  console.log(res);
  if (res != boxBig) clearInterval(timer);
}, 1000);
    .boxBig {
  width: 100px;
  height: 100px;
  top: 0;
  padding: 2px;
  border: 5px solid black;
  position: absolute;
}

.boxSmall {
  border: 5px solid rgb(231, 26, 91);
  position: fixed;
  width: 40px;
  height: 40px;
  top: 100px;
  left: 30px;
}

#current {
  position: absolute;
  width: 2px;
  height: 2px;
  background: red;
}
    <div id="current"></div>
<div class="boxBig"></div>
<div class="boxSmall"></div>

    • 0

相关问题