Mousetrap使用指南

发表于 更新于 阅读次数： 本文字数： 1.8k 阅读时长 ≈ 3 分钟

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

这里介绍下使用

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

feat

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

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

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

  1. Pause/unpause

    停止该mousetrap的绑定和恢复

  2. Record

    热键录制，这个在实现网页自定义热键时有用

  3. Bind dictionary

    支持字典形式，一次性绑定多个热键。

使用

  1. mousetrap构造函数参数即热键监听绑定元素，如果不传则默认为document

    1
    let mousetrap = new Mousetrap(window);

  2. bind

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

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

  3. unbind

    1
    mousetrap.unbind(['command+k']);

    注意，ubind这里的按键与bind一致，因此也可以是数组/字符串

  4. trigger

    1
    mousetrap.trigger(['g i']);

  5. stopCallback

    1
    2
    3
    mousetrap.stopCallback = function () {
      return false;
    };

    控制回调阻止逻辑，默认是input/textarea/editable情况下不触发热键绑定，如上即所有请求情况下均触发

  6. reset()

    1
    2
    mousetrap.reset();

    重置即删除所有绑定

  7. addKeycodes

    1
    2
    3
    Mousetrap.addKeycodes({
      144: 'numlock'
    });

    添加键码映射，一般不用动。这里是因为库老化，整个实现里是用的kecode而不是key。目前MDN已经不提倡使用KeyCode

  8. record

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

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

mousetrap的问题

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

    1
    2
    3
    4
    function _restartRecordTimer() {
        clearTimeout(_recordTimer);
        _recordTimer = setTimeout(_finishRecording, 1000);
    }

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

    1
    2
    3
    4
    5
    6
    7
    8
    function _addEvent(object, type, callback) {
        if (object.addEventListener) {
            object.addEventListener(type, callback, false);
            return;
        }
       
        object.attachEvent('on' + type, callback);
    }

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

     
    1
    2
    3
    for (i = 0; i < modifiers.length; ++i) {
                   _recordKey(modifiers[i]);
               }

相关文档

写在最后

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