首页 > 其他 > 详细

vue 手指长按触发事件

时间:2019-01-19 12:37:09      阅读:273      评论:0      收藏:0      [点我收藏+]

按钮

<span class="btn" @touchstart="gtouchstart()" @touchmove="gtouchmove()" @touchend="gtouchend()">按住说话</span>

 

data数据定义一个定时器

timeOutEvent:0,//定时器

 

方法

        gtouchstart(){
                this.timeOutEvent = setTimeout(()=>{
                    this.timeOutEvent = 0;
                    //真正长按后应该执行的内容
                     
                    console.log("长按事件触发发");
                },500);//这里设置定时器,定义长按500毫秒触发长按事件,时间可以自己改,个人感觉500毫秒非常合适
                return false;
            },

 

        //如果手指有移动,则取消所有事件,此时说明用户只是要移动而不是长按
            gtouchmove(){
                clearTimeout(this.timeOutEvent);//清除定时器
                this.timeOutEvent = 0;
                alert("取消了");
            },

 

      //手释放,如果在500毫秒内就释放,则取消长按事件,此时可以执行onclick应该执行的事件
            gtouchend(){
                clearTimeout(this.timeOutEvent);//清除定时器
                if(this.timeOutEvent!==0){
                    //这里写要执行的内容(尤如onclick事件)
                    console.log("你这是点击,不是长按");
                }
                return false;
            },

 

vue 手指长按触发事件

原文:https://www.cnblogs.com/dudu123/p/10291240.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!