vue 手指长按触发事件

Posted 2021-02-04 dudu123

按钮

<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;
            },