Menu
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
630
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);
}
}
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.
6
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
