JS监听键盘组合事件

起因

今天看到一个需求，要是使用Alt+A快捷键实现某个功能。

可以监听键盘的事件

keydown keyup keypress都可以监听键盘事件。
他们之间的区别在于：

• keypress只能捕捉单个字符
• keypress 可以捕获单个字符的大小写
• keypress 不区分小键盘和主键盘的数字字符
• keypress 不能监听alt、ctrl、enter、shift这些
• keydown keyup 可以捕获组合键
• keydown keyup 不能区分字母的大小写
• keydown keyup 区分小键盘和主键盘数字字符

监听单个键盘事键

    // document.addEventListener('keydown',(e)=>{
    //   console.log(e);
    // })
    // document.addEventListener('keypress',(e)=>{
    //   console.log(e);
    // })
    document.addEventListener('keyup',(e)=>{
      console.log(e);
    })

监听两键组合事件

以Ctrl+C为例

 document.addEventListener('keydown',(e)=>{
      if(e.ctrlKey&&e.keyCode===67){
        console.log('Ctrl+c');
      }
    })

当按下ctrl、alt、shift键时e对应的ctrlKey、altKey、shiftKey是为true的。Mac电脑的command键是metaKey
注意：这里只能是ctrl、alt、shift 加一个普通键。

普通两键或三键改如何判断呢

我的思路是：在指定时间内（比如300ms）,如果按了某键，就将改键的key存入指定对象上。如果超时或者已经触发了，就将保存的对象还原。
然后判断对象上是否同时存在我们要监听的按键即可。

    // 普通两键示例
    let firstTime = 0
    let doubleEvent = {}
    document.addEventListener('keyup',(e)=>{
      let currentTime = Date.now()
      if(firstTime===0){
        firstTime =  currentTime
        doubleEvent[e.key] = true
      }else if(currentTime-firstTime>300){//超过300ms
        firstTime = 0
        doubleEvent = {}
      }else{
        doubleEvent[e.key] = true
      }
      if(doubleEvent.b&&doubleEvent.c){
        console.log('b+c');
        doubleEvent = {}
        firstTime = 0
      }
    })

PS：有其他思路的大佬，可以指教一下。谢谢