179 lines
4.8 KiB
JavaScript
179 lines
4.8 KiB
JavaScript
// 按钮短按检测与处理示例
|
||
// 本代码展示如何实现短按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; |