为何keydown事件监听的最后一个if语句无法触发？

嘿，我一眼就瞅出问题所在啦！你这里混淆了event.key和event.code的区别，这就是最后一个判断触发不了的关键。

核心区别： #

• event.key返回的是按键对应的字符值，比如按下Q键时，它返回的是'q'；按下B键时返回'b'。
• event.code返回的是键盘上的物理键标识，和字符无关，比如Q键对应的是'KeyQ'，B键是'KeyB'，空格键是'Space'（这个你用对了）。

你最后一个判断写的是event.code === 'q'，但实际上按下Q键时，event.code的值是'KeyQ'，完全不匹配，所以永远触发不了弹窗。哪怕你把B和Q的位置交换，只要用错了code和key，对应的那个判断就会失效。

修正后的代码 #

把最后一个条件改成下面两种写法的任意一种都能解决问题：

写法一：继续使用event.key

document.addEventListener("keydown", event => {
  (async () => {
    if (event.key === 'b' && event.ctrlKey) {
      alert('1')
    } else if (event.code === 'Space' && event.ctrlKey) {
      alert('2')
    } else if (event.key === 'q' && event.ctrlKey) { // 这里改成event.key
      alert('3')
    }
  })()
})

写法二：改用event.code对应的值

document.addEventListener("keydown", event => {
  (async () => {
    if (event.key === 'b' && event.ctrlKey) {
      alert('1')
    } else if (event.code === 'Space' && event.ctrlKey) {
      alert('2')
    } else if (event.code === 'KeyQ' && event.ctrlKey) { // 这里改成KeyQ
      alert('3')
    }
  })()
})

建议尽量保持判断逻辑的一致性，要么都用event.key，要么都用event.code，这样不容易搞混哦～

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