如何在VueJS中获取鼠标坐标

Question

如何在VueJS中获取鼠标坐标

Lui*_*uiz 10 javascript vue.js vue-component vuejs2

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

如何获得此点击的鼠标坐标(X,Y)？

附加信息:HTML5 Canvas组件

Answer 1

kev*_*guy 21

Vue将the 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);
    }
}

Run Code Online (Sandbox Code Playgroud)

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

Answer 2

ade*_*neo 5

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

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

Run Code Online (Sandbox Code Playgroud)

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

归档时间：	8 年，5 月前
查看次数：	11050 次
最近记录：	8 年，5 月前