js 实现双击事件

最新推荐文章于 2025-04-27 13:20:06 发布

原创最新推荐文章于 2025-04-27 13:20:06 发布 · 6.7k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端

js 专栏收录该内容

1 篇文章

订阅专栏

在uniapp基于vue的小程序开发中，通过记录按钮单击事件的时间戳和DOM标识，判断连续两次点击是否在500ms内完成，以实现双击事件。当时间差小于500ms且DOM相同，执行双击逻辑。这种方法巧妙地利用了时间戳来模拟双击事件。

背景：使用uniapp vue开发小程序时，需要实现按钮双击事件

思路：通过给按钮绑定单击事件，然后定义一个数组记录每次单击的按钮标识和单击的时间戳，然后每次单击后比较数组最后两个元素，如果最后两个元素dom标识为同一个dom并且时间差值小于500ms,则判定为双击事件，执行双击事件逻辑

伪代码：

1. 给dom元素绑定单击事件：<view @click="fillAmount(index)">

2.定义数组用来保存每次单击的数据：clickArray: new Array()

数组元素结构{index: index, time: new Date().getTime()}其中index是dom元素标识

3.实现双击事件

fillAmount(index){
    // index是dom元素标识
	this.clickArray.push({index: index, time: new Date().getTime()})
	if(this.clickArray.length >= 2){
		let item1 = this.clickArray[this.clickArray.length-1]
		let item2 = this.clickArray[this.clickArray.length-2]
		if(item1.index === item2.index &&
		(item1.time - item2.time) < 500){
			// 双击事件逻辑
		}
	}
}

以上就是自己的思路，如有问题恳请指正，不胜感激