实现空格键按下停止、弹起启动的秒表，如何避免自动重启？

你的核心问题是没有区分spacebar的「按下」和「弹起」动作，且在同一个keyup事件里混合处理了启动、停止逻辑，导致停止操作完成后，弹起动作又触发了启动。

解决方案：拆分事件监听，明确动作分工 #

分别监听keydown和keyup事件，让两个动作各自对应停止、启动逻辑，同时通过状态判断避免无效触发：

// 监听spacebar按下事件：执行停止逻辑
window.addEventListener('keydown', (e) => {
  if (e.keyCode === 32) {
    // 只有当秒表处于启动状态时，才执行停止
    if (status === "started") {
      clearInterval(timerInterval);
      stop();
      status = "stopped";
    }
    // 阻止默认行为，避免页面滚动等干扰
    e.preventDefault();
  }
});

// 监听spacebar弹起事件：执行启动逻辑
window.addEventListener('keyup', (e) => {
  if (e.keyCode === 32) {
    // 只有当秒表处于停止状态时，才执行启动
    if (status === "stopped") {
      start();
      status = "started";
    }
    // 保留原有的重置逻辑：如果已经有计时，弹起时重置
    else if (elapsedTime !== 0) {
      reset();
    }
    e.preventDefault();
  }
});

关键调整说明 #

• 拆分两个事件：keydown对应停止，keyup对应启动，完全匹配你的需求
• 增加状态前置判断：每个动作只在对应状态下触发，避免重复执行或误触发
• 添加e.preventDefault()：阻止spacebar默认的页面滚动行为，提升秒表使用体验
• 保留原有的重置逻辑，但调整触发条件为「非启动状态且已有计时」，避免和启动逻辑冲突

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