码迷,mamicode.com
首页 > 其他好文 > 详细

vue 手指长按触发事件

时间:2019-01-19 13:13:55      阅读:504      评论:0      收藏:0      [点我收藏+]

标签:turn   strong   move   数据   clear   onclick   ret   取消   timeout   

按钮

<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 手指长按触发事件

标签:turn   strong   move   数据   clear   onclick   ret   取消   timeout   

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

(0)
(2)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!