Mousetrap使用指南
·
2 min read
网页热键监听处理可以使用mousetrap.js。这个lib已经处于不维护状态,但胜在好用,还是很推荐。
这里介绍下使用
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