如何创建一个听多个快捷键Ctrl + [1-9]的听众？

Question

问题

如何创建一个侦听多个快捷键Ctrl + [1-9]的侦听器，然后将按下的快捷键值传递给changeRoute (pressedNumber)方法？

例如

按
• Ctrl + 1
• changeRoute (pressedNumber)在控制台中显示1
按
• Ctrl + 2
• changeRoute (pressedNumber)在控制台中显示2
• ...... etc

代码（vue.js）

到目前为止，我有这个：

created () {
  window.addEventListener('keydown', this.switchTab)
},

methods: {
  switchTab (event) {
    if (event.ctrlKey && event.keyCode === 49) {
     this.changeRoute (event)        
    }

    if (event.ctrlKey && event.keyCode === 50) {
     this.changeRoute (event)        
    }
    ...
  },
  changeRoute (event) {
    console.log(event.key)
  }
}

如何避免9 if条款？

更新：

我已通过以下方式解决了问题：

if ((event.key >= 1 && event.key <= 9) && event.ctrlKey == true) {
  let tabPathIndex = event.key - 1
}

Answer 1

F1-F9个键位于范围的可能数字中，因此只需在单个if语句中使用该范围：

created () {
  window.addEventListener('keydown', this.switchTab)
},

methods: {
  switchTab (event) {
    // F1 = 112, F12 = 123 
    if (event.ctrlKey && event.keyCode > 111 && event.keyCode < 124   ) {
     this.changeRoute (event)        
    }
  },
  changeRoute (event) {
    console.log(event.key)
  }
}

Vanilla JS演示：

   // Try pressing CTRL+F1 to F12 (give the demo window focus first)
document.addEventListener('keydown', e => {
    console.log( e.keyCode );
    return false;
})

Answer 2

如果你仍然没有明确，你可以使用switch声明：

if(event.ctrlKey) {
    switch(event.keyCode) {
        case 49: case 50: case 51: case 52: case 53: 
        case 54: case 55: case 56: case 57: case 58:
            this.changeRoute(event);
            break;
    }
}