Vue 获取鼠标位置坐标

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
    }

}