如何在VueJS中获取鼠标坐标

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

Answer 2

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

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

还有clientX和screenX ，它们根据视口、屏幕或呈现的内容返回有些不同的结果。

如何在VueJS中获取鼠标坐标

问题描述

2 个解决方案

解决方案1
42 已采纳 2017-08-07 18:14:16

解决方案2
6 2017-08-07 18:12:24

如何在VueJS中获取鼠标坐标

问题描述

2 个解决方案

解决方案1 42 已采纳 2017-08-07 18:14:16

解决方案2 6 2017-08-07 18:12:24

解决方案1
42 已采纳 2017-08-07 18:14:16

解决方案2
6 2017-08-07 18:12:24