How to get mouse coordinates in VueJS

Like you would in any event handler

new Vue({
  el: '#element',
  methods: {
    someMethod: function (event) {
      var x = event.pageX;
      var y = event.pageY;
    }
  }
})

There's also clientX and screenX, they return somewhat different results based on the viewport, the screen or the rendered content.


Vue passes the event as the first parameter in the method. If parameters, use this instead: someMethod(param1, param2, event)

    methods: {
        someMethod(event) {
            // clientX/Y gives the coordinates relative to the viewport in CSS pixels.
            console.log(event.clientX);
            console.log(event.clientY);

            // pageX/Y gives the coordinates relative to the <html> element in CSS pixels.
            console.log(event.pageX);
            console.log(event.pageY);

            // screenX/Y gives the coordinates relative to the screen in device pixels.
            console.log(event.screenX);
            console.log(event.screenY);
        }
    }

Tags:

Javascript

Vue.Js

Vuejs2

Vue Component

Recent Posts