注册快捷键（单快捷键、组合快捷键）

一、注册快捷键方法

window.addEventListener('keydown', onWindowKeyDown, false);
window.addEventListener('keyup', onWindowKeyUp, false);

注意：addEventListener在组建销毁的时候也需要销毁

eg：react+hooks

  useEffect(() => {window.addEventListener('keydown', onWindowKeyDown, false);window.addEventListener('keyup', onWindowKeyUp, false);return (() => {window.removeEventListener('keydown', onWindowKeyDown, false);window.removeEventListener('keyup', onWindowKeyUp, false);})}, [])

二、区分mac和windows快捷键

1、从UA中获取相关数据来判定是mac系统

let isMac = /Mac OS X/ig.test(navigator.userAgent);

2、mac和windows组合键和单快捷键操作

@see:

isMac: 判断是否是mac电脑

evt: 系统事件对象，如果使用了typescript，参数可以设置成evt: KeyboardEvent

evt.metaKey: 准备使用组合键，按下了metaKey，distinguishKeyBoardEvent方法下面讲

!evt.metaKey: 不使用快捷键，单键直接触发快捷功能

如果是windows，同理换成evt.ctrlKey,如下

function onWindowKeyDown (evt) {if (isMac) {if (evt.metaKey) {distinguishKeyBoardEvent(evt);}if (!evt.metaKey) publicKeyboardShortcuts(evt); //单快捷键操作} else {if (evt.ctrlKey) {distinguishKeyBoardEvent(evt);}if (!evt.ctrlKey) publicKeyboardShortcuts(evt);}
}

3、上面的组合键 distinguishKeyBoardEvent 方法定义

注：下面function(){ //doSomething } 是按下快捷键之后的主要逻辑

function distinguishKeyBoardEvent (evt) {const actions = new Map([[{keyCode: 'z'}, () => function(){//doSomething}],[{keyCode: 'y'}, () => function(){//doSomething}],]);let action = [...actions].filter(([key, value]) => (key.keyCode == evt.key));action.forEach(([key, value]) => {value.call(window); //执行方法function(){//doSomething}evt.stopPropagation();evt.cancelBubble = true});
}

4、上面的单快捷键 publicKeyboardShortcuts 方法定义

注：下面doing(){ } 是按下快捷键之后的主要逻辑

function publicKeyboardShortcuts (evt) {const actions = new Map([[{keyCode: 'p'}, () => doing()],[{keyCode: 'c'}, () => doing()],[{keyCode: 't'}, () => doing()],[{keyCode: 's'}, () => doing()],[{keyCode: 'e'}, () => doing()],[{keyCode: 'v'}, () => doing()],[{keyCode: 'q'}, () => doing()],]);let action = [...actions].filter(([key, value]) => (key.keyCode == evt.key));action.forEach(([key, value]) => value.call(window)); //执行doing方法
}function doing() {//doSomething
}

注意：如果有单快捷键，这时候要注意输入框，如果需要在输入框中书写内容，就不能触发快捷键操作，如下可以return掉

if (["INPUT", "TEXTAREA"].includes((evt.target as HTMLElement).nodeName)) return;

交流

1、QQ群：可添加qq群共同进阶学习：进军全栈工程师疑难解群号: 856402057

2、公众号：公众号「进军全栈攻城狮」，对前端技术保持学习爱好者。我会经常分享自己所学所看的干货，在进阶的路上，共勉！

学习之余，不要忘记吃饭了

注册快捷键（单快捷键、组合快捷键）相关推荐

windows10快捷键（windows10常用快捷键大全）
时间就是金钱,那么我们该如何提升办公效率已经变得非常的必须,能用键盘操作的东西,几乎不用鼠标去点击,所以快捷键就变得非常的重要. 那么今天就和大家一起来分享Windows 10的各种快捷键. Win1 ...
Win10下徽标Win键组合快捷键大全
Win10下徽标Win键组合快捷键大全每一代Windows都会为键盘上的Windows徽标键增加新的快捷键组合, 使用快捷键可在一定程度上提高操作效率,本文列举Win10下可用的Windows徽标键 ...
Swing 设置组合快捷键
想设置Ctrl+d,Alt+d,这种组合快捷键,找了半天未果,结果发现,java本省就预先设置好了,挺好用的,而且目测自己没什么办法设置组合键,当按下了Ctrl或者Alt这种键时,根本监听不到其它键的 ...
php禁止组合热键,cad组合快捷键命令有哪些
cad组合快捷键命令有:1.[Ctrl+B]为栅格捕捉模式控制:2.[Ctrl+P]为打印:3.[Ctrl+C]将选择的对象复制到剪切板上:4.[Ctrl+F]为控制是否实现对象自动捕捉. cad组合 ...
电脑技巧：盘点常用的Win组合快捷键
今天给大家继续分享电脑使用技巧,给大家介绍一下有哪些常用Win组合快捷键,希望可以对大家的日常办公提高帮助! 1.Win+E:打开我的电脑超级实用的一个组合键,不论你当前在操作什么,只要按下这个组合 ...
Win10电脑的快捷键有哪些？Windows10常用组合快捷键大全
小白进阶之Windows10常用组合快捷键大全一.引言二.Windows10常用组合快捷键 1.Ctrl组合快捷键 2.Alt组合快捷键 3.Windows组合快捷键 4. 虚拟桌面 5.其它三 ...
eclipse快捷键（增加一些4连组合快捷键）
http://www.blogjava.net/i369/articles/83309.html ECLISPE的快捷键大全 Eclipse 常用快捷键收集2006年09月29日星期五 12:00 ...
计算机的组合快捷键,Win10的电脑的快捷键有哪些？Windows10常用组合快捷键大全...
我们在使用Windows操作系统的时候,如果会合理的运行组合快捷键,那么就会让你的工作变得更加高效.那么Win10的电脑的快捷键有哪些?下面装机之家分享一下Win10常用组合快捷键大全,学习这些快捷键 ...
cherry键盘G80-3000s无法使用组合快捷键
刚买的键盘,在使用一段时间后发现不能使用组合快捷键,但是打字和F1-F9的功能键还是可以使用,但是win键不能,在网上搜了很多帖子,基本可以肯定是键盘被锁了,cherry有个游戏模式,但是解锁的方法基 ...
Ctrl组合快捷键大全
Ctrl+W是什么快捷键 Ctrl组合快捷键大全 2013-01-02 18:00 来源:www.pc841.com 作者:电脑百事网原创查看评论分享给小伙伴们看看: 关注我们: 近 ...

注册快捷键（单快捷键、组合快捷键）

交流

注册快捷键（单快捷键、组合快捷键）相关推荐

最新文章

热门文章