Vue3中如何获取图片点击时的相对鼠标位置？

你可以通过以下方式实现，无需手动计算页面边界，直接基于图片自身尺寸计算相对比例：

解决方案代码 #

修改你的onimgClick方法：

onimgClick(event) {
  const img = event.target;
  const rect = img.getBoundingClientRect();
  // 计算相对X坐标（0到1）
  const relX = (event.clientX - rect.left) / rect.width;
  // 计算相对Y坐标（0到1）
  const relY = (event.clientY - rect.top) / rect.height;
  console.log(`相对坐标: (${relX.toFixed(2)}, ${relY.toFixed(2)})`);
}

关键说明 #

1. getBoundingClientRect()：这个方法会返回元素相对于视口的位置和实际渲染尺寸，不管图片在页面中的布局位置如何，都能准确获取它的left/top偏移和width/height。
2. clientX/clientY：这两个属性是点击位置相对于视口的坐标，减去图片的视口偏移后，得到点击点在图片内部的绝对坐标，再除以图片的实际宽高，就得到了0到1之间的相对比例。
3. 为什么offsetX/offsetY为0：通常是因为元素的样式上下文问题（比如Quasar的flex布局影响了元素的偏移计算），而getBoundingClientRect()不受这类布局影响，是更可靠的方式。

可选优化（处理图片加载） #

如果图片是异步加载的，为了确保获取到正确的尺寸，可以给图片添加@load事件，在图片加载完成后再进行相关逻辑（不过点击事件触发时图片肯定已加载，所以这个优化可选）：

<img
  alt="Quasar logo"
  src="~assets/quasar-logo-vertical.svg"
  style="width: 200px; height: 200px"
  @click="onimgClick"
  @load="onImgLoad"
/>

methods: {
  onImgLoad(event) {
    // 可以在这里提前存储图片尺寸，避免点击时重复计算
    this.imgRect = event.target.getBoundingClientRect();
  },
  onimgClick(event) {
    const rect = this.imgRect || event.target.getBoundingClientRect();
    const relX = (event.clientX - rect.left) / rect.width;
    const relY = (event.clientY - rect.top) / rect.height;
    console.log(`相对坐标: (${relX.toFixed(2)}, ${relY.toFixed(2)})`);
  }
}

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