vue 长按事件

最新推荐文章于 2024-05-08 13:24:57 发布

97小菜鸟

最新推荐文章于 2024-05-08 13:24:57 发布

阅读量241

点赞数

分类专栏：前端文章标签： web app vue.js

本文链接：https://blog.csdn.net/weixin_43468000/article/details/112245535

版权

前端专栏收录该内容

15 篇文章 0 订阅

订阅专栏

var timeOutEvent=0;//定时器  

// html
<div @touchstart="gotouchstart" @touchmove="gotouchmove" @touchend="gotouchend"></div>

//js
gotouchstart(){
   let that = this;
   clearTimeout(timeOutEvent);//清除定时器
   timeOutEvent = 0;
   timeOutEvent = setTimeout(function(){
        //执行长按要执行的内容，
      ...
     },600);//这里设置定时
 },
      //手释放，如果在500毫秒内就释放，则取消长按事件，此时可以执行onclick应该执行的事件
gotouchend(){
    clearTimeout(timeOutEvent);
      if(timeOutEvent!=0){
        //这里写要执行的内容（尤如onclick事件）
     }
},
//如果手指有移动，则取消所有事件，此时说明用户只是要移动而不是长按 
gotouchmove(){
     clearTimeout(timeOutEvent);//清除定时器
     timeOutEvent = 0;
},