JavaScript中可靠方向键输入检测：Command组合键释放异常问题

我之前在Mac平台开发时也碰到过类似的组合键与方向键冲突的问题，尤其是Command+右键释放后出现的异常，本质上是旧方案依赖已废弃的event.which键码，且没有处理系统级组合键的干扰。下面给你几个更稳定的实现思路：

1. 使用语义化的event.key替代键码 #

event.which和event.keyCode已经被标准废弃，推荐使用event.key直接判断按键名称（比如ArrowLeft、ArrowRight），这种方式不依赖系统键码映射，兼容性更好。同时我们可以维护一个按键状态对象，避免按住键时重复触发逻辑，也能更精准处理组合键场景：

// 维护按键状态，防止重复触发
const keyStatus = {
  ArrowLeft: false,
  ArrowRight: false,
  ArrowUp: false,
  ArrowDown: false
};

// 监听按下事件
document.addEventListener('keydown', (e) => {
  // 特殊处理Command+右键的场景：阻止系统默认行为（比如切换桌面）
  if (e.metaKey && e.key === 'ArrowRight') {
    e.preventDefault();
    return;
  }

  // 仅在按键从松开变为按下时执行逻辑
  if (keyStatus.hasOwnProperty(e.key) && !keyStatus[e.key]) {
    keyStatus[e.key] = true;
    switch(e.key) {
      case 'ArrowLeft':
        console.log('左方向键按下');
        // 你的左方向键逻辑
        break;
      case 'ArrowRight':
        console.log('右方向键按下');
        // 你的右方向键逻辑
        break;
      case 'ArrowUp':
        console.log('上方向键按下');
        // 你的上方向键逻辑
        break;
      case 'ArrowDown':
        console.log('下方向键按下');
        // 你的下方向键逻辑
        break;
    }
  }
});

// 监听释放事件
document.addEventListener('keyup', (e) => {
  if (keyStatus.hasOwnProperty(e.key)) {
    keyStatus[e.key] = false;
    switch(e.key) {
      case 'ArrowLeft':
        console.log('左方向键释放');
        // 你的左方向键释放逻辑
        break;
      case 'ArrowRight':
        console.log('右方向键释放');
        // 你的右方向键释放逻辑
        break;
      case 'ArrowUp':
        console.log('上方向键释放');
        // 你的上方向键释放逻辑
        break;
      case 'ArrowDown':
        console.log('下方向键释放');
        // 你的下方向键释放逻辑
        break;
    }
  }
});

2. 避免覆盖全局事件监听 #

旧方案用document.onkeydown = function()的赋值方式，会覆盖之前绑定的所有键盘事件监听，改用addEventListener可以同时绑定多个事件处理函数，更安全灵活。

3. 处理系统组合键干扰 #

在Mac上，Command+方向键是系统默认快捷键（比如切换空间、移动光标到行首/行尾），如果你的业务需要接管这些组合键，必须在keydown事件中调用e.preventDefault()阻止系统默认行为，否则释放时会出现异常的键事件。

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