Question

我有一个用v-on:click="someMethod"触发的组件。

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

其他信息：HTML5 Canvas组件

Answer 1

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

Answer 2

就像你在任何事件处理程序中一样

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

还有clientX和screenX，它们会根据视口，屏幕或渲染的内容返回不同的结果。

如何在VueJS中获取鼠标坐标

2 个答案: