代码之家 › 专栏 › 技术社区 › Luiz

如何在VueJS中获取鼠标坐标

vue-component vuejs2 vue.js javascript

Luiz · 技术社区 · 7 年前

我有一个组件用 v-on:click="someMethod" .

我如何获得这次点击的鼠标坐标(X,Y)?

2 回复 | 直到 7 年前

Anatoly 3 年前

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

adeneo 7 年前

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

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

clientX 和 screenX

推荐文章

Goose · 如何更新Vue中的插槽。JS公司

6 年前

Scap · 访问其他组件中的vue组件数据时出现问题

6 年前

Andy · 从列表中删除vue组件始终删除列表中的最后一个元素

6 年前

Harshal Patil · 如何创建Vue。js插槽编程?

6 年前

kindisch · 无法解析动态导入的vue组件

6 年前

user1436631 · vueJS-当本地副本更新时,属性正在发生变化

6 年前

Willing Master · 如何配置选项以删除vue-tables-2中分页的第一个和最后一个按钮

6 年前

kshep92 · 将布尔属性传递给Vue组件的速记

6 年前

Bitwise · 将动态数据传递到路由器链路。

6 年前

user3699711 · 如何将数组中的元素添加到div元素中,其中id等于vue中的数组元素dealState号。js公司

6 年前