如何在VueJS中获取鼠标坐标答案

【问题标题】：How to get mouse coordinates in VueJS如何在VueJS中获取鼠标坐标
【发布时间】：2018-01-15 03:05:34
【问题描述】：

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

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

附加信息：HTML5 Canvas 组件

【问题讨论】：

标签： javascript vue.js vuejs2 vue-component

【解决方案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);
            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);
        }
    }

【讨论】：

这可行，但如果您的 HTML 代码中有参数，则需要使用 $event。例如：<canvas @click="someMethod(param1, param2, $event)"> 然后您可以在 methods 部分中创建 someMethod(param1, param2, event)。

【解决方案2】：

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

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

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

【讨论】：