uni-app双击事件（单击、双击互不干扰）

╰+哭是因爲堅強的太久メ 2021-10-06 18:52 1319阅读 0赞

### uni-app中绑定双击事件 ###

> 功能需求

在uni-app中，很多时候我们需要元素绑定双击事件，比如自定义的视频播放器，双击播放、暂停，但是显示进度条、隐藏进度条。  
但是在uni-app官方并没有提供双击事件，那么就需要我们自己来实现双击事件的逻辑。在双击的时候不能触发单击事件，在单击的时候不能触发双击事件。  
在做双击事件的时候，大多数情况下就是使用时间戳来实现，两次点击的时间差小于某一个值是判定为双击事件，否则判定为单击事件。

> 代码实现

下面展示一下我的实现的代码。

//html部分
    <view @touchend="maskTouchend"></view>
    
    //js部分
    export default { 
    	data(){ 
    		return { 
    			touchNum : 0,
    		}
    	},
    	methods:{ 
    		maskTouchend(e){ 
    			this.touchNum ++
    			setTimeout(()=>{ 
    				if(this.touchNum == 1){ 
    					console.log('单击')
    				}
    				if(this.touchNum >= 2){ 
    					console.log('双击')
    				}
    				this.touchNum = 0
    			},250)
    		}	
    	}
    }

其实现原理主要使用的就是`setTimeout`延时函数的延时执行机制，当用户点击元素的时候，触发延时函数，延时函数在250毫秒之后执行，如果用户在250毫秒之内仅仅只点击了一下，那么在延时函数执行之前，`touchNum = 1`，所以会满足单击的条件，执行单击逻辑。但是如果用户在250毫秒之内，点击了两次甚至多次，那么此时延时函数还没有执行，而`tocuhNum`的值已经大于或者等于2了，也就是说在延时函数执行之前，`touchNum`的值满足双击的条件，不满足单击的条件，所以不会执行单击事件，而执行双击事件。在事件处理完成之后再将`touchNum`的值还原。

> 当然还有很多实现的方法，这里就不一一例举了，大家可以多多尝试，只有在不断的尝试和摸索中才能明白他的实现原理，才能真正的学到东西