如何获得图像点击时的相对鼠标位置（Vue 3）

Question

I'm working on trying to get the relative click coordinates on an image. For example, if I click at the very top left of an image, I'm looking to get (0, 0), and for the bottom right, (1, 1) or similar regardless of where on the page the image is.

This is what I'm trying so far:

<template>
  <q-page class="flex flex-center">
    <img
      alt="Quasar logo"
      src="~assets/quasar-logo-vertical.svg"
      style="width: 200px; height: 200px"
      @click="onimgClick"
    />
  </q-page>
</template>

<script>
import { defineComponent } from "vue";

export default defineComponent({
  name: "IndexPage",
  methods: {
    onimgClick(event) {
      console.log(event);
    },
  },
});
</script>

This shows a click event in the console as expected, but I don't see an easy way of getting the coordinates relative to the image. This is what is printed to console:

_vts: 1671234852933
altKey: false
bubbles: true
button: 0
buttons: 0
cancelBubble: false
cancelable: true
clientX: 635
clientY: 216
composed: true
ctrlKey: false
currentTarget: null
defaultPrevented: false
detail: 1
eventPhase: 0
explicitOriginalTarget: <img alt="Quasar logo" src="/src/assets/quasar-logo-vertical.svg" style="width: 200px; height: 200px;">
isTrusted: true
layerX: 635
layerY: 166
metaKey: false
movementX: 0
movementY: 0
mozInputSource: 1
mozPressure: 0
offsetX: 0
offsetY: 0
originalTarget: <img alt="Quasar logo" src="/src/assets/quasar-logo-vertical.svg" style="width: 200px; height: 200px;">
pageX: 635
pageY: 216
rangeOffset: 0
rangeParent: null
relatedTarget: null
returnValue: true
screenX: 635
screenY: 329
shiftKey: false
srcElement: <img alt="Quasar logo" src="/src/assets/quasar-logo-vertical.svg" style="width: 200px; height: 200px;">​
target: <img alt="Quasar logo" src="/src/assets/quasar-logo-vertical.svg" style="width: 200px; height: 200px;">
timeStamp: 13808
type: "click"
view: Window http://localhost:9000/#/
which: 1
x: 635
y: 216 

I was hoping that offsetX and offsetY would help here, but they appear to always be 0. How can I do this in Vue without having to figure out the bounds of the image on the page and then finding the offset manually?

Answer 1

You could subtract the current mouse position minus the x and y position of your image. Something like:

Check this example

onimgClick(event) { const target = event.target; const bounds = target.getBoundingClientRect(); const posX = event.clientX - bounds.x; const posY = event.clientY - bounds.y; console.log(posX, posY); },