// 按钮短按检测与处理示例 // 本代码展示如何实现短按1下、短按2下和短按10下的检测与处理逻辑 class ButtonClickHandler { constructor() { // 配置参数 this.clickTimeout = 300; // 点击间隔超时时间(毫秒),超过此时间认为是新的点击序列 this.longPressThreshold = 600; // 长按判断阈值(毫秒) // 状态变量 this.clickCount = 0; // 当前点击序列的点击次数 this.lastClickTime = 0; // 上次点击时间戳 this.isLongPress = false; // 是否为长按 this.isPressed = false; // 按钮是否处于按下状态 this.clickTimer = null; // 点击定时器 this.longPressTimer = null; // 长按定时器 // 绑定事件 this.setupEventListeners(); } setupEventListeners() { // 这里模拟按钮事件监听,实际使用时替换为真实的DOM事件 console.log('按钮点击处理器已初始化,请使用模拟函数测试: simulateButtonDown(), simulateButtonUp()'); } // 模拟按钮按下事件 onButtonDown() { this.isPressed = true; // 设置按钮按下状态 console.log('按钮按下'); // 重置长按标志 this.isLongPress = false; // 启动长按检测定时器 this.longPressTimer = setTimeout(() => { this.isLongPress = true; console.log('检测到长按'); this.handleLongPress(); }, this.longPressThreshold); } // 模拟按钮释放事件 onButtonUp() { // 只有在按钮确实被按下的情况下才处理释放事件 if (!this.isPressed) { console.log('警告: 检测到无效的按钮释放事件'); return; } this.isPressed = false; // 重置按钮按下状态 console.log('按钮释放'); // 清除长按定时器 if (this.longPressTimer) { clearTimeout(this.longPressTimer); this.longPressTimer = null; } // 如果不是长按,则处理短按 if (!this.isLongPress) { this.handleShortPress(); } } // 处理短按 handleShortPress() { const currentTime = Date.now(); const timeSinceLastClick = currentTime - this.lastClickTime; // 判断是否为新的点击序列(两次点击间隔超过阈值) if (timeSinceLastClick > this.clickTimeout) { // 重置点击计数 this.clickCount = 1; } else { // 增加点击计数 this.clickCount++; } // 更新上次点击时间 this.lastClickTime = currentTime; // 清除之前的定时器 if (this.clickTimer) { clearTimeout(this.clickTimer); } // 启动新的定时器,超时后处理点击序列 this.clickTimer = setTimeout(() => { this.processClickSequence(); }, this.clickTimeout); } // 处理长按 handleLongPress() { console.log('执行长按操作'); // 可以在这里添加长按的具体处理逻辑 } // 处理点击序列 processClickSequence() { console.log(`检测到 ${this.clickCount} 次短按`); // 根据点击次数执行不同的操作 switch (this.clickCount) { case 1: this.handleSingleClick(); break; case 2: this.handleDoubleClick(); break; case 10: this.handleTenClicks(); break; default: if (this.clickCount > 2 && this.clickCount < 10) { console.log(`检测到 ${this.clickCount} 次短按,但没有特定处理逻辑`); } else if (this.clickCount > 10) { console.log(`检测到 ${this.clickCount} 次短按,次数过多`); } } // 重置点击计数 this.clickCount = 0; } // 处理单击 handleSingleClick() { console.log('执行单击操作 - 短按1下'); // 这里添加单击的具体逻辑 } // 处理双击 handleDoubleClick() { console.log('执行双击操作 - 短按2下'); // 这里添加双击的具体逻辑 } // 处理十连击 handleTenClicks() { console.log('执行十连击操作 - 短按10下'); // 这里添加十连击的具体逻辑 } // 模拟测试函数 simulateButtonDown() { this.onButtonDown(); } simulateButtonUp() { this.onButtonUp(); } // 模拟单次点击 simulateSingleClick() { this.simulateButtonDown(); setTimeout(() => this.simulateButtonUp(), 100); } // 模拟双击 simulateDoubleClick() { this.simulateSingleClick(); setTimeout(() => this.simulateSingleClick(), 150); // 两次点击间隔小于clickTimeout } // 模拟十连击 simulateTenClicks() { for (let i = 0; i < 10; i++) { setTimeout(() => this.simulateSingleClick(), i * 150); } } } // 测试代码 console.log('短按检测系统演示'); const buttonHandler = new ButtonClickHandler(); // 导出处理器实例供外部使用 module.exports = buttonHandler;