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

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

  •  
  •   black11black · 71 天前 · 483 次点击
    这是一个创建于 71 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

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

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

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