Mousetrap使用指南

· 2 min read

网页热键监听处理可以使用mousetrap.js。这个lib已经处于不维护状态，但胜在好用，还是很推荐。
这里介绍下使用

https://static.1991421.cn/2023/2023-11-19-151351.jpg

feat

支持单/组合键/gmail风格/Konami Code 按键绑定

gmail风格即比如g i，连续输入这样的按键可以执行某个动作，这种热键的好处是很容易规避浏览器/插件的热键
Konami Code 就有点像魂斗罗时，特定的按键触发30条命一样。个人认为这种按键绑定，如有必要，设计成网页彩蛋挺合适

除了热键绑定基本feat外，mousetrap也有一些拓展可以解决特定诉求

Pause/unpause
停止该mousetrap的绑定和恢复
Record
热键录制，这个在实现网页自定义热键时有用
Bind dictionary
支持字典形式，一次性绑定多个热键。

使用

mousetrap构造函数参数即热键监听绑定元素，如果不传则默认为document
```
let mousetrap = new Mousetrap(window);
```

bind

mousetrap.bind(['command+k','g i'], function(e,combokey) { highlight(combokey); });

注意，回调第二个参数即按键组合，比如command+k或g i

unbind
```
  mousetrap.unbind(['command+k']);
```
注意，ubind这里的按键与bind一致，因此也可以是数组/字符串
trigger
```
  mousetrap.trigger(['g i']);
```
stopCallback
```
  mousetrap.stopCallback = function () {
    return false;
  };
```
控制回调阻止逻辑，默认是input/textarea/editable情况下不触发热键绑定，如上即所有请求情况下均触发
reset()
```
  mousetrap.reset();
```
重置即删除所有绑定
addKeycodes
```
  Mousetrap.addKeycodes({
    144: 'numlock'
  });
```
添加键码映射，一般不用动。这里是因为库老化，整个实现里是用的kecode而不是key。目前MDN已经不提倡使用KeyCode

record

mousetrap.record(function(sequence) {
            alert('You pressed: ' + sequence.join(' '));
        });

注意record的超时时间为1s，且不支持持续record

mousetrap的问题

record超时时间写死了1s，目前需要改源码拓展为参数，或修改值解决

    function _restartRecordTimer() {
        clearTimeout(_recordTimer);
        _recordTimer = setTimeout(_finishRecording, 1000);
    }

mousetrap采用的事件冒泡，如果想走事件捕获，也需要修改源码拓展支持解决

    function _addEvent(object, type, callback) {
        if (object.addEventListener) {
            object.addEventListener(type, callback, false);
            return;
        }

        object.attachEvent('on' + type, callback);
    }

record插件导入打包会遇到报错，原因是for循环中i未定义，严格模式下打包会报错。

 ```js
  for (i = 0; i < modifiers.length; ++i) {
                 _recordKey(modifiers[i]);
             }
 ```

写在最后

如果是WEB下实现热键绑定，还是可以考虑使用mousetrap

Last updated on Nov 19, 2023

Mousetrap使用指南

feat

使用

mousetrap的问题

相关文档

写在最后

Related