Question

我试图实现一个元素，用于在悬停它时缩放图像的一部分 - 就像你在电子商务网站上看到的那样。在悬停图像时，我添加了一个用鼠标移动到图像顶部的框架。

这是通过以下代码完成的。

addFrame = (x,y,el) => {
    const frameEl = document.getElementById("frame");
    frameEl.style.left = x+"px";
    frameEl.style.top = y+"px";
  }

  handleMouseMove = (e) => {
    this.addFrame(e.clientX,e.clientY,e.target);
  }

我试图获取此添加框架内的内容 - 将其放大并在不同视图中缩放。如何获取我添加的框架下的内容？

Answer 1

悬停事件的originaltarget属性会告诉您鼠标指向的是什么，但如果您将图像隐藏在透明屏障后面，则无法正常工作。

Answer 2

您可能正在寻找document.elementFromPoint(x,y)：

addFrame = (x, y, el) => {
  // ...
  const elem = document.elementFromPoint(x, y)
  if (!elem) return

  console.log(elem.textContent) 
}

查看示例here

在Javascript中使用坐标获取内容

2 个答案: