V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
black11black
V2EX  ›  问与答

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

  •  
  •   black11black · 2020-11-11 22:13:10 +08:00 · 1034 次点击
    这是一个创建于 1233 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

    想实现的需求是在页面里比如按一下 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
        1
    zsdroid  
       2020-11-11 22:20:12 +08:00
    e.ctrlKey
    lithbitren
        2
    lithbitren  
       2020-11-12 03:59:47 +08:00   ❤️ 1
    一般不用 addEventListenerr('keypress', () => {}),不好单独监听功能键,不好防冒泡,浏览器快捷键也容易冲突。

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

    然后可以考虑声明一个全局布尔变量作为控制锁并监听 document.onkeyup,普通数字字母 keydown 且是组合键的时候加锁再执行功能,ctrl 键 keyup 的时候看看有没有被锁,有锁的话说明是组合键就解锁然后跳过,没锁的话说明是单独按了 ctrl 则可以执行 ctrl 的功能,然后可以加个锁,用 settimeout 设定一两秒后自动解锁就可以防止快速的连续触发了。
    lithbitren
        3
    lithbitren  
       2020-11-12 04:03:19 +08:00
    不过 onkeyup 本身很难连发,如果不介意手抖 ctrl 按很多次的话,延时解锁也可以不用写进 onkeyup 的监听逻辑里
    rodrick
        4
    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');
    }
    }
    ```
    分开判断一下完事
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   2853 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 26ms · UTC 11:41 · PVG 19:41 · LAX 04:41 · JFK 07:41
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.