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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

V2EX 提问指南

这是一个创建于 1473 天前的主题，其中的信息可能已经有所发展或是发生改变。

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

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

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

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

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

4 条回复 • 2020-11-12 09:38:58 +08:00

zsdroid

2020-11-11 22:20:12 +08:00

e.ctrlKey

lithbitren

2020-11-12 03:59:47 +08:00

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

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

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

lithbitren

2020-11-12 04:03:19 +08:00

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

rodrick

2020-11-12 09:38:58 +08:00

```
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
}
}

document.onkeyup = function (e) {
var keyCode = e.keyCode || e.which || e.charCode;
// ctrl 抬起且锁（组合事件）解锁
if (keyCode == 17 && lockFlag) {
// e.preventDefault
lockFlag = false
console.log('是组合事件，不执行 ctrl 事件，lockflag:' + lockFlag);
// return false
// ctrl 抬起且没锁（不是组合事件）
} else if (keyCode == 17 && !lockFlag) {
console.log('是 ctrl');
}
}
```
分开判断一下完事