如何正确获取鼠标相对于img的坐标？解决矩形干扰问题

这个问题很常见——绝对定位的矩形覆盖在img上时，鼠标事件会被矩形捕获，直接用offsetX/Y得到的是相对于矩形的坐标，而不是我们要的img的坐标。下面给你两种靠谱的解决思路：

核心思路：基于视口坐标统一计算 #

不管鼠标在哪个元素上，我们都可以通过鼠标相对于视口的坐标减去img元素相对于视口的偏移量，来得到相对于img左上角的坐标，这个方法不受事件触发元素的影响。

完整代码示例 #

先补全你的HTML结构（假设body里有img和矩形），再加上处理逻辑：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <style>
    .rectangle {
      border: 1px solid #FF0000;
      position: absolute;
      left:100px;
      top:100px;
      width:100px;
      height:200px;
    }
    #targetImg {
      /* 给img加个默认样式，方便测试 */
      width: 400px;
      height: 300px;
      border: 1px solid #ccc;
    }
  </style>
</head>
<body>
  <img id="targetImg" src="your-image-url.jpg" />
  <div class="rectangle"></div>
  <p id="coordInfo"></p>

  <script>
    const img = document.getElementById('targetImg');
    const coordDisplay = document.getElementById('coordInfo');

    // 监听整个文档的鼠标移动，确保不管鼠标在img还是矩形上都能触发
    document.addEventListener('mousemove', (e) => {
      // 获取img在视口中的位置和尺寸信息
      const imgRect = img.getBoundingClientRect();
      
      // 计算相对于img左上角的坐标
      const relativeX = e.clientX - imgRect.left;
      const relativeY = e.clientY - imgRect.top;

      // 可选：判断鼠标是否在img范围内
      const isInImg = relativeX >= 0 && relativeX <= imgRect.width 
                      && relativeY >= 0 && relativeY <= imgRect.height;

      if (isInImg) {
        coordDisplay.textContent = `相对于img的坐标：X=${Math.round(relativeX)}, Y=${Math.round(relativeY)}`;
      } else {
        coordDisplay.textContent = '鼠标不在img区域内';
      }
    });
  </script>
</body>
</html>

关键知识点解释 #

• getBoundingClientRect()：这个方法会返回元素相对于浏览器视口的位置（left/top是元素左上角的视口坐标），同时包含元素的width/height，它会自动处理元素的边框、外边距，甚至页面滚动的影响。
• clientX/clientY：这是鼠标事件对象里的属性，表示鼠标指针相对于视口的坐标，不会受元素嵌套或定位的影响。
• 为什么不用offsetX/Y？因为offsetX/Y是相对于事件触发元素的坐标，当鼠标在矩形上时，触发元素是矩形，所以得到的是相对于矩形左上角的数值，这不是我们要的。

另一种思路：事件委托 #

如果不想监听整个文档，也可以给img和矩形同时绑定鼠标事件，处理逻辑和上面完全一样——因为计算坐标的方式不依赖事件的触发源，只要拿到鼠标的视口坐标和img的视口偏移就行。

比如：

// 给img和矩形都绑定事件
const elements = [img, document.querySelector('.rectangle')];
elements.forEach(el => {
  el.addEventListener('mousemove', (e) => {
    // 这里的计算逻辑和上面完全相同
    const imgRect = img.getBoundingClientRect();
    const relativeX = e.clientX - imgRect.left;
    const relativeY = e.clientY - imgRect.top;
    // ...后续处理
  });
});

这样不管鼠标在img还是矩形上，都能正确得到相对于img的坐标啦！

内容的提问来源于stack exchange，提问作者user8483278