Javascript keydown 函数不能同时注册两个键

Question

我有一个简单的函数，可以在按下某个键时进行注册，然后将 CSS flash 动画应用于元素。

如以下代码片段所示，如果您单击进入代码片段窗口并按 P 键或命令键(OSX - 我相信仅适用于 safari)，那么 nav 元素将添加一个 flash 动画。

window.onkeydown = function(e) {
  if (e.which == 91 || e.which == 80) {
    document.getElementById("nav").classList.add('flash');
    window.setTimeout(function() {
      document.getElementById("nav").classList.remove('flash');
    }, 100)
  }
}

.flash {
  animation: flash 0.5s 2 alternate ease-out;
}

@keyframes flash {
  to {
    background-color: orange;
  }
}

<nav id="nav">
  blahblahblah
</nav>

如果我更改它以便 if 语句是 if (e.which == 91 && e.which == 80) 它不再触发动画。

我正在努力做到，当同时按下 command+P 按钮时，会触发 flash 动画

Answer 1

此语句的计算结果始终为false:

if (e.which == 91 && e.which == 80)

keydown 事件仅针对一个键触发。

如果您只考虑用任何其他键按下 command 的情况，您可以使用 meta 属性，正如@RobbyCornelissen 在他的回答中所建议的那样。

window.onkeydown = function(e) {
  if (e.which === 80 && e.metaKey) {
    console.log("Pressed");
  }
}

但是，对于更通用的情况，例如同时按下 3 个按钮或在没有 command 的情况下按下两个按钮，请使用此方法。您可以存储当前按下的调用键映射，然后使用它来检查当前是否按下了所有需要的键。要创建这样的 map ，您可以使用从 this answer 借来的代码:

var map = {}; // You could also use an array
onkeydown = onkeyup = function(e){
    e = e || event; // to deal with IE
    map[e.keyCode] = e.type == 'keydown';
    /* insert conditional here */
}