vue web端长按事件,解决和click冲突

  <div
          class="main_content"
          @mousedown="loopZoom()"
          @mouseup="clearLoopZoom()"
          @click="handlerZoom()"
        >
          测试长按
        </div>
   handlerZoom() {
        if (this.flag) {
          console.log('执行click事件')
        }
        this.flag = false
    },
    loopZoom() {
      console.log("长按开始咯")
      this.firstTime = new Date().getTime()
      this.timeOut = setTimeout(() => {
      console.log("长按事件")
      }, 800);
    },
    clearLoopZoom() {
      console.log("长按结束咯")
      this.lastTime=new Date().getTime()
      if (this.lastTime - this.firstTime < 100) {
          this.flag=true
        }
      clearTimeout(this.timeOut);
      this.timeOut = "";
      clearInterval(this.setIntervals);
      this.setIntervals = "";
    },

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Vue中可以通过`@touchstart`、`@touchmove`和`@touchend`等事件来实现事件和取消事件的效果。具体实现方法如: 1. 事件 在需要实现事件的元素上添加`@touchstart`事件,并在事件处理函数中使用`setTimeout`函数来实现事件的效果。例如: ```html <template> <div @touchstart="startLongPress">按我</div> </template> <script> export default { methods: { startLongPress() { this.timer = setTimeout(() => { console.log('事件触发了') }, 1000) } } } </script> ``` 在上面的代码中,我们在`startLongPress`方法中使用`setTimeout`函数来实现事件的效果,当用户按元素1秒钟后,就会触发`console.log`语句输出“事件触发了”。 2. 取消事件 在需要取消事件的元素上添加`@touchmove`和`@touchend`事件,并在事件处理函数中使用`clearTimeout`函数来取消事件的效果。例如: ```html <template> <div @touchstart="startLongPress" @touchmove="cancelLongPress" @touchend="cancelLongPress">按我</div> </template> <script> export default { methods: { startLongPress() { this.timer = setTimeout(() => { console.log('事件触发了') }, 1000) }, cancelLongPress() { clearTimeout(this.timer) } } } </script> ``` 在上面的代码中,我们在`cancelLongPress`方法中使用`clearTimeout`函数来取消事件的效果,当用户在按元素的过程中移动手指或者松开手指时,就会取消事件的效果。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值