获取点击图片的位置

Question

我希望能够获得图像中点击的位置。我想获取图像本身的坐标，而不是页面容器中的坐标。我最接近的是这样的：<template>  <div class="image-annotation">    <div style="position: relative">      <!-- image-annotation__marker class has styles to center place the pointer in a absolute positioning -->      <div class="image-annotation__marker" :style="markerStyle" />      <img          ref="image"          src="https://lh6.ggpht.com/HlgucZ0ylJAfZgusynnUwxNIgIp5htNhShF559x3dRXiuy_UdP3UQVLYW6c=s1200"          alt="Art image"          @click="onClickImage"      />    </div>  </div></template><script>import Vue from 'vue'import Component from 'vue-class-component'@Componentexport default class Counter extends Vue {  public activeCoordinates: { x: number; y: number } | null = null;    public $refs!: {    image: HTMLElement  }  get hideSecondColumn() {    return this.activeCoordinates !== null  }  get markerStyle() {    if (this.activeCoordinates === null) return { display: 'none' }    return {      top: `${this.activeCoordinates.y}px`,      left: `${this.activeCoordinates.x}px`,    }  }  public onClickImage(event: MouseEvent) {    this.activeCoordinates = {      x: event.pageX - this.$refs.image.offsetTop,      y: event.pageY - this.$refs.image.offsetLeft,    }  }}</script>但是当单击图像时，我在图像中得到以下点（该点不完全是我单击的位置）我想准确地了解我点击图片的位置

Answer 1

答案是一个非常简单的解决方案。替换event.pageX - this.$refs.image.offsetTop为event.offsetX.

来自 MDN 文档：

MouseEvent 接口的 offsetX 只读属性提供鼠标指针在该事件和目标节点的填充边缘之间的 X 坐标偏移量。

对比

MouseEvent 接口的 pageX 只读属性返回单击鼠标时相对于整个文档左边缘的 X（水平）坐标（以像素为单位）。这包括当前不可见的文档的任何部分。