JavaScript：检测按键持续按住超1秒（未松开时触发）

核心逻辑 #

• 监听keydown事件：记录按键按下的时间戳，同时启动1秒定时器
• 监听keyup事件：清除定时器并重置按键状态，避免误触发
• 定时器回调：检查按键是否仍处于按住状态，若是则执行响应逻辑

代码实现 #

// 存储当前按住的按键标识和定时器ID
let pressedKey = null;
let holdTimer = null;

document.addEventListener('keydown', (e) => {
  // 避免按键重复触发keydown时重复创建定时器
  if (pressedKey === e.key) return;
  
  pressedKey = e.key;
  // 设置1秒后执行的检测逻辑
  holdTimer = setTimeout(() => {
    if (pressedKey === e.key) {
      // 这里替换为你需要的响应逻辑
      console.log(`按键 ${e.key} 已持续按住1秒`);
    }
  }, 1000);
});

document.addEventListener('keyup', (e) => {
  if (pressedKey === e.key) {
    pressedKey = null;
    clearTimeout(holdTimer);
  }
});

关键细节说明 #

• 防重复触发：部分浏览器在按键持续按住时会重复触发keydown事件，通过pressedKey状态判断避免重复创建定时器
• 及时清理资源：keyup事件中必须清除定时器，防止松开按键后定时器仍执行响应逻辑
• 自定义响应：把示例中的console.log替换为实际业务逻辑即可，比如修改DOM、触发功能函数等

内容的提问来源于stack exchange，提问作者Lampe2020