Vue 获取鼠标位置坐标

在Vue项目中,我们可能有获取鼠标信息的需求来处理业务逻辑。

介绍

下面,我们将通过介绍touch事件,来获取鼠标位置。

事件名功能
touchstart鼠标点击时,触发该事件一次。
touchmove当鼠标移动时,会多次调用该事件。
touchend当鼠标停止移动时,触发该事件一次。

template

<div id="app">
  <div class="circle" @touchstart="touchstart" @touchmove="touchmove" ></div>
</div>

javascript

let app = new Vue({
    el: '#app',
    data: {
    message: 'app'
  },
  methods: {
    // 当鼠标点击时触发,类似onclick事件
      touchstart(e) {
        console.log('touchstart')
    },
    // 当鼠标移动时触发
    touchmove(e) {
        console.log('touchmove')
    }
  }
})

如何获取鼠标的x,y坐标

这就要利用事件回调中的 e.targetTouches 属性了。

// 获取x 坐标
e.targetTouches[0].clientX 
// 获取y 坐标
e.targetTouches[0].clientY

如何获取鼠标每次移动的差值

当鼠标移动时,如何计算得出,当前鼠标位置与上一次鼠标位置的差值呢?

例如,当前鼠标位置为(1,2),上一次鼠标位置为(0,0),差值就是:
x:1,y:2

methods: {
    touchstart(e) {
        // 获取起始坐标位置x
        this.lastPosX = e.targetTouches[0].clientX
    },
    touchmove(e) {
        // 获取当前位置x
        this.curPosX = e.targetTouches[0].clientX

        // 计算差值
        this.diff = +(this.curPosX - this.lastPosX)

        // 其他业务逻辑
        // ...

        // 更新lastPosX
        this.lastPosX = this.curPosX
    }

}

这里写图片描述

Logo

前往低代码交流专区

更多推荐