hotkeys-js 库，在npm上可搜索查找，作为自己项目里用来监听键盘快捷键，之前由领导负责的该功能模块，现闲来无事，看了下该库的文档，从头到尾跟着把所有API都测了一遍。

---

 特性概览：

1. 监听键盘按键(快捷键)

2. 默认情况下，INPUT SELECT TEXTAREA 元素不响应快捷键；如有需要则通过设置 hotkeys.filter 进行自定义 >>>  例如某元素某些情况下响应快捷键，某些情况下不响应；

3. 绑定的按键不区分大小写；要区分则在按键的 KeyHandler 函数里处理；

4. 可声明多个活动范围，然后可切换活动范围，从而实现不同场景下，对应的快捷键功能；也就是对不同场景的快捷键功能进行对应功能模块封装。

5. 核心API： hotkeys; hotkeys.setScope; hotkeys.getScope(); hotkeys.deleteScope; hotkeys.trigger; hotkeys.unbind。hotkeys.filter估计很少场景需要，剩下其他5个API个人感觉基本上就用不上了，有兴趣的自行去人家文档里查看。

import hotkeys from 'hotkeys-js';function initHotkey() {hotkeys('b', {scope: 'demo'}, (event, handler) => {console.log('demo 按下');});hotkeys('q,b', {}, (event, handler) => {console.log('all按下');});hotkeys('S,b', {scope: 'canvas', // 设置按键所属活动范围（需要激活）; 若参数 scope == false ，则默认值为'all'，all是默认激活(active)。keydown: true, // 默认truekeyup: true, // 默认falsesplitKey: '-', // 默认值为'+' ，组合键连接符，例如原来按2个键触发xx则是s+b， splitKey声明为`-`后，则是s-b// capture: true, // 默认值为false, 就是 addEventListener 该函数的第三个参数；// element: document, // 默认值为 document , 就是给该 element 添加事件>  element.addEventListener}, (event, handler) => {// 声明了 scope 参数则必须 setScope 激活。// 第二个参数 类型为 string | object | function； 如果hotkeys()传入3个参数，第二个参数则必须是string | object 。// 为string时则是 scope 参数，需激活； 为object时，根据object内声明的参数进行对应处理； // 第二个参数为function则是按键触发时的回调函数； 如同第三个参数，也就是说第二个参数是函数，则不需要传入第三个参数；if (!event||!handler) {// trigger 用该API触发的回调函数，这两个值都是undefined；根据业务需求需要注意额外处理。return}event?.preventDefault()console.log(event, handler, '按下');// console.log(event.type); // keydown，keyup参数都为true的情况下，可根据该属性区分按键是按下还是弹起； 最好的方式感觉还是再用hotkeys()重新声明，调整keydown/up的值即可；// console.log(event.key); // 若要判断按键触发时的大小写问题，则通过该属性进行处理；});// hotkeys.setScope('canvas'); // 使用“setScope”方法设置当前活动范围; 除了“all”之外，只能有一个活动范围。默认情况下（可手动删除），“all”始终处于活动状态。// 注意！如果使用了setScope设置激活范围，则后续的 unbind 这些API 只会作用于该激活的范围！简单来说就是只会作用于 getScope() 返回的范围！hotkeys.setScope('canvas')console.log(hotkeys.getScope(), '获取当前激活的活动范围，若无则返回all，注意all永远是默认激活的，除非主动delete掉all！');// hotkeys.unbind('b', 'all'); // 指定某个活动范围取消绑定该按键// hotkeys.unbind('b'); // 取消绑定某个按键; 如果未指定作用域，则默认为当前作用域 getScope()// hotkeys.unbind(); // 解除所有活动范围的所有按键绑定！function del() {hotkeys.deleteScope('canvas')setTimeout(() => {hotkeys('b', {scope: 'canvas'}, (event, handler) => {console.log('重新注册的 canvas 按下');});hotkeys.setScope('canvas')}, 5000);}// hotkeys.deleteScope('all') // 删除活动范围// hotkeys.deleteScope('canvas') // 删除该活动范围，删除后，无法再设置setScope该活动范围 ！ 想要使用则需要重新 hotkeys() 注册！// hotkeys.deleteScope('issues', 'newScopeName'); // 如果需要在删除后，激活新的活动范围则传入第二个参数(需激活的)即可。setTimeout(() => {console.log('代码里主动触发');hotkeys.trigger('b', 'canvas'); // 触发'canvas'活动的b按键事件；但事件回调里不会有event, handler 这2个参数！// hotkeys.trigger('b'); // 若不传入scope参数，则默认是触发all活动的按键！}, 3000);
}