JavaScript键盘组合键冲突：如何正确捕获无冲突快捷键

问题根源 #

你遇到的冲突是因为原示例代码中，按下Ctrl+Y时，KeyY的状态为true，导致单键判断和组合键判断同时触发——没有排除"存在修饰键"的情况。

最简解决方案（适合新手） #

直接利用键盘事件对象自带的修饰键属性（ctrlKey/altKey/shiftKey/metaKey），无需手动维护按键状态，逻辑更清晰：

window.addEventListener('keydown', function(event) {
  // 优先处理组合键：Ctrl + Y，确保无其他修饰键
  if (event.ctrlKey && !event.altKey && !event.shiftKey && !event.metaKey && event.code === 'KeyY') {
    console.log("Ctrl-Y");
    event.preventDefault(); // 阻止浏览器默认行为（比如Ctrl+Y的撤销操作）
    return; // 直接返回，避免触发后续单键逻辑
  }

  // 单键Y：仅当没有任何修饰键按下时触发
  if (!event.ctrlKey && !event.altKey && !event.shiftKey && !event.metaKey && event.code === 'KeyY') {
    console.log("Y");
    event.preventDefault();
  }
});

更灵活的多键监听方案 #

如果需要支持更复杂的组合（比如多个修饰键+普通键），可以用Set维护当前按下的键，逻辑更严谨：

const pressedKeys = new Set();

window.addEventListener('keydown', function(event) {
  pressedKeys.add(event.code);

  // 检查各类修饰键状态（考虑左右键）
  const hasCtrl = pressedKeys.has('ControlLeft') || pressedKeys.has('ControlRight');
  const hasAlt = pressedKeys.has('AltLeft') || pressedKeys.has('AltRight');
  const hasShift = pressedKeys.has('ShiftLeft') || pressedKeys.has('ShiftRight');
  const hasMeta = pressedKeys.has('MetaLeft') || pressedKeys.has('MetaRight');

  // Ctrl + Y
  if (hasCtrl && !hasAlt && !hasShift && !hasMeta && pressedKeys.has('KeyY')) {
    console.log("Ctrl-Y");
    event.preventDefault();
    pressedKeys.delete('KeyY'); // 防止持续按住Y重复触发
  }
  // 单键Y
  else if (!hasCtrl && !hasAlt && !hasShift && !hasMeta && pressedKeys.has('KeyY')) {
    console.log("Y");
    event.preventDefault();
    pressedKeys.delete('KeyY');
  }
  // 其他组合键可以按同样逻辑添加
});

window.addEventListener('keyup', function(event) {
  pressedKeys.delete(event.code);
});

核心原则 #

1. 优先级顺序：先判断组合键，再判断单键，用return或else if保证逻辑互斥
2. 严格条件：单键触发必须确保没有任何修饰键处于激活状态
3. 阻止默认行为：用event.preventDefault()避免和浏览器自带快捷键冲突
4. 避免重复触发：对于持续按住的按键，处理后可从状态集合中移除，防止多次执行

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