小程序实现双击事件

5,844 阅读1分钟

目前小程序支持的事件不包括双击事件,由于项目需要在同一个元素上同时实现双击和单击两种不同的事件,需要自己实现双击的效果。 首先定义相关变量

// 最后一次单击事件点击发生时间
this.lastTapTime = 0;
// 单击事件点击后要触发的函数
this.lastTapTimeoutFunc = null;

然后添加点击事件,单击和双击的判断条件主要是两次点击的间隔时长,我这边定义的是80ms,如果间隔在80s内,则认为是双击事件,否则就是单击事件,因此,如果是单击事件,则要延时80ms执行,同样,如果是双击事件,就要取消单击事件的执行。具体代码如下

handleDayClick(e){
    let currentTime = e.timeStamp
    if (currentTime - this.lastTapTime < 80) {
		clearTimeout(this.lastTapTimeoutFunc);
		//执行双击操作
		...
	} else {
		this.lastTapTimeoutFunc = setTimeout(() => {
		// 执行单击操作
		...
		}, 80);
	}
	//更新点击时间
	this.lastTapTime = currentTime;
}