How to get mouse coordinates in VueJS

javascript vue.js vuejs2 vue-component
Luiz picture Luiz · Aug 7, 2017 · Viewed 18.5k times · Source

I have a component triggered with v-on:click="someMethod".

How would I get the mouse coordinates (X, Y) of this click?

Additional information: HTML5 Canvas component

Answer

kevguy picture kevguy · Aug 7, 2017

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);
        }
    }

Related questions

How to listen for 'props' changes

In the VueJs 2.0 docs I can't find any hooks that would listen on props changes. Does VueJs have such hooks like onPropsUpdated() or similar? Update As @wostex suggested, I tried to watch my property but nothing changed. Then I realized …

Read More
How to add external JS scripts to VueJS Components

I've to use two external scripts for the payment gateways. Right now both are put in the index.html file. However, I don't want to load these files at the beginning itself. The payment gateway is needed only in when …

Read More
[Vue warn]: Property or method is not defined on the instance but referenced during render

var MainTable = Vue.extend({ template: "<ul>" + "<li v-for='(set,index) in settings'>" + "{{index}}) " + "{{set.title}}" + "<button @click='changeSetting(index)'> Info </button>" + "</li>" + "</ul>", data: function() { return …

Read More