vue2：鼠标触发各类事件-Toy模板网

这篇具有很好参考价值的文章主要介绍了vue2：鼠标触发各类事件。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

vue中鼠标按下及离开事件

移动端

touchstart:     //手指放到屏幕上时触发

touchmove:      //手指在屏幕上滑动式触发

touchend:    //手指离开屏幕时触发

touchcancel:     //系统取消touch事件的时候触发，这个好像比较少用

pc端

mousedown	鼠标按钮被按下时发生
mouseout	鼠标指针位于某个元素上且将要移出元素的边界时发生
mouseover	鼠标指针移出某个元素到另一个元素上时发生
mouseup	鼠标按键被松开时发生
mousemove	鼠标在某个元素上时持续发生
mouseleave	当鼠标指针移出元素时触发
mouseenter	当鼠标指针移动到元素上时触发。

长按事件（或鼠标按下、鼠标离开事件）

<img 
:src="returns ?	require(`../assets/home/return2.png`):require(`../assets/home/return1.png`)" 
        @touchstart="gtouchstart()"
        @touchmove="gtouchmove()"
        @touchend="showDeleteButton()"
 />



//长按事件（起始） 返回按钮
    gtouchstart() {
      var self = this;
      this.timeOutEvent = setTimeout(function () {
        self.longPress();
      }, 500); //这里设置定时器，定义长按500毫秒触发长按事件
      return false;
    },
    //手释放，如果在500毫秒内就释放，则取消长按事件，此时可以执行onclick应该执行的事件
    showDeleteButton() {
      clearTimeout(this.timeOutEvent); //清除定时器
      if (this.timeOutEvent != 0) {    //这里写要执行的内容（如onclick事件）点击未长按
        this.returns=true
        setTimeout(() => {
          this.returns=false
        }, 100);
      }else{ //长按后松开要执行的内容
        this.returns=false
      }
      return false;
    },
    //如果手指有移动，则取消所有事件，此时说明用户只是要移动而不是长按
    gtouchmove() {
      clearTimeout(this.timeOutEvent); //清除定时器
      this.timeOutEvent = 0;
      console.log("移动");
    },
    //真正长按后应该执行的内容
    longPress(val) { //执行长按要执行的内容，如弹出菜单
      this.timeOutEvent = 0;
      this.returns=true
      console.log("长按");
    },

vue 移动端获取鼠标位置

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文章来源地址https://www.toymoban.com/news/detail-849557.html

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
    }

}

vue PC端获取鼠标位置

<button @click="getMouseXY($event)">点击获取鼠标坐标</button> 


getMouseXY(e){
     this.x = e.pageX //获取鼠标的X坐标（鼠标与屏幕左侧的距离，单位为px）
     this.y = e.pageY //获取鼠标的Y坐标（鼠标与屏幕顶部的距离，单位为px）
    },

到了这里，关于vue2：鼠标触发各类事件的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！