如何在VueJS中获取鼠标坐标

我有一个触发组件v-on:click="someMethod"。如何在VueJS中获取鼠标坐标

如何获取此点击的鼠标坐标（X，Y）？

其他信息：HTML5 Canvas组件

2017-08-07 Luiz

Vue通过event作为方法中的第一个参数。如果是参数，则改为：someMethod（param1，param2，event）

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

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

来源

2017-08-07 18:14:16 kevguy

你一样会和在任何事件处理

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

还有clientX和screenX，他们返回基于视窗，在屏幕上或呈现的内容有所不同的结果。

来源

2017-08-07 18:12:24 adeneo

如何在VueJS中获取鼠标坐标

回答

相关问题