Get Coordinates @Mouseenter Vue?-CodePudding

I'm trying to play an animation on mouseenter event in vue. But to do that I need to get the sections coordinates.

<script setup>
function getCoords(e) {
  const coords = { x: e.clientX, y: e.clientY } // This doesn't work ¯\_(ツ)_/¯

  console.log(coords) // Error
  // ...
}
</script>

<template>
  <!-- ... -->
  <section
    @mouseenter="getCoords()" />
</template>

I've tried, clientX, pageX, screenX, but they don't work. So how do I get the coordinates?

CodePudding user response：

You need to remove the () from the handler:

<script setup>
function getCoords(e) {
  const coords = { x: e.clientX, y: e.clientY } 

  console.log(coords) 
  // ...
}
</script>

<template>
  <!-- ... -->
  <section
    @mouseenter="getCoords" />
</template>