如何获取<div>左上角坐标并计算图片内鼠标点击的相对坐标

（或者直接是元素）的DOM对象，这样后续才能获取它的位置信息。比如：

<div class="image-container" bind:this={containerRef}>
  <img src="your-image.png" on:click={handleImageClick} />
</div>

<script>
let containerRef; // 用来存储容器的DOM引用

function handleImageClick(e) {
  // 点击事件逻辑写在这里
}
</script>

第二步：获取容器的左上角坐标 #

当用户点击图片时，你可以调用DOM元素的getBoundingClientRect()方法，这个方法会返回一个包含元素位置和尺寸的对象，其中left就是容器左上角的视口X坐标，top是左上角的视口Y坐标，完全满足你的需求！

第三步：计算相对点击坐标 #

鼠标点击事件e里的clientX和clientY是相对于浏览器视口的绝对坐标，用它们减去容器的left和top，就能得到相对于容器左上角的相对坐标了：

function handleImageClick(e) {
  if (!containerRef) return;
  
  // 获取容器的位置和尺寸信息
  const rect = containerRef.getBoundingClientRect();
  
  // 计算相对于容器左上角的坐标
  const relativeX = e.clientX - rect.left;
  const relativeY = e.clientY - rect.top;
  
  console.log('相对坐标：', relativeX, relativeY);
}

额外补充：如果需要对应图片原始像素的坐标 #

如果你的图片被容器缩放了（比如容器宽高和图片原始尺寸不一样），想要得到相对于图片本身像素的坐标，还可以多一步计算：

// 从点击的img元素获取原始尺寸
const img = e.target;
const originalWidth = img.naturalWidth;
const originalHeight = img.naturalHeight;

// 计算缩放比例
const scaleX = originalWidth / rect.width;
const scaleY = originalHeight / rect.height;

// 转换为图片原始像素的相对坐标
const imgRelativeX = relativeX * scaleX;
const imgRelativeY = relativeY * scaleY;

关于你提到的contentRect #

你说的contentRect其实是ResizeObserver里的参数，用来监听元素尺寸变化的，如果你需要在容器大小变化时实时更新信息，可以用它，但对于点击时获取坐标来说，直接在点击事件里调用getBoundingClientRect()更简单直接，而且能保证拿到的是点击瞬间的最新位置（比如页面滚动后容器位置变化了，这个方法也能准确获取）。

备注：内容来源于stack exchange，提问作者Michael