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的值还原。

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