JavaScript 中，前端捕捉键盘按键，如何处理组合键的问题？

資深大佬 : black11black 3

如题，简单实现了一下按键捕捉，但是复杂情况搞不定

想实现的需求是在页面里比如按一下 Ctrl，页面快进一页，而分别按组合键 Ctrl+1,Ctrl+2,Ctrl+3….等等分别对应不同的功能。

如果按照 document.onkeydown 的做法的话，按组合键的时候同时也会触发 Ctrl 的功能，这就不对了。另外 Ctrl 如果按住的话会连续触发绑定方法，导致页面多次渲染，是否有办法针对 Ctrl 连续触发单独搞一个绑定呢？

最后问一下带佬，网上查到这些捕捉方式，有什么区别啊。谢谢

window.addEventListener('keypress'()=>{}) document.onkeydown

大佬有話說 (4)

資深大佬 : zsdroid

e.ctrlKey

資深大佬 : lithbitren

一般不用 addEventListenerr(‘keypress’, () => {})，不好单独监听功能键，不好防冒泡，浏览器快捷键也容易冲突。

判断事件是否是组合键，在 document.onkeydown 的实现函数里面查看 event.ctrlKey 就行，注意返回 false 防止浏览器 ctrl+nwt 以外的快捷键冒泡。

然后可以考虑声明一个全局布尔变量作为控制锁并监听 document.onkeyup，普通数字字母 keydown 且是组合键的时候加锁再执行功能，ctrl 键 keyup 的时候看看有没有被锁，有锁的话说明是组合键就解锁然后跳过，没锁的话说明是单独按了 ctrl 则可以执行 ctrl 的功能，然后可以加个锁，用 settimeout 设定一两秒后自动解锁就可以防止快速的连续触发了。

資深大佬 : lithbitren

不过 onkeyup 本身很难连发，如果不介意手抖 ctrl 按很多次的话，延时解锁也可以不用写进 onkeyup 的监听逻辑里

資深大佬 : rodrick

“`
let lockFlag = false
document.onkeydown = function (e) {
var keyCode = e.keyCode || e.which || e.charCode;
var ctrlKey = e.ctrlKey || e.metaKey;
if (ctrlKey && keyCode == 49) {
e.preventDefault
lockFlag = true
console.log(‘组合事件’);
return false
}
}