一、功能需求

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

二、实现代码

html部分

<view @click="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的值还原。