Vue 获取鼠标位置坐标

Vue 获取鼠标位置坐标

引用

CSDN

1.

https://blog.csdn.net/u013243347/article/details/81179422

在Vue项目中，我们可能有获取鼠标信息的需求来处理业务逻辑。下面，我们将通过介绍touch事件，来获取鼠标位置。

touch事件介绍

Vue模板和JavaScript代码示例

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

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