V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
JCZ2MkKb5S8ZX9pq
V2EX  ›  前端开发

js 如何屏蔽 Chrome 的部分快捷键

  •  
  •   JCZ2MkKb5S8ZX9pq · 2022-09-26 23:09:17 +08:00 · 1628 次点击
    这是一个创建于 822 天前的主题,其中的信息可能已经有所发展或是发生改变。

    需求是

    • 希望在网页上使用自定义快捷键。
    • 但部分希望自定义的快捷键跟 Chrome 自有快捷键冲突了,比如 Ctrl+Shfit+A 、Ctrl+ShiftG ,都会被浏览器先触发。
    • 如果直接在 keydown 后 preventDefault ,可以阻挡大部分的快捷键,但一些浏览器常用键也就被覆盖了,比如 Ctrl+R 刷新页面也不行了。
    • 但如果在判断组合键之后,再 preventDefault 也会触发 Chrome 默认快捷键(猜测是判断组合键那几微秒的延迟,就被 Chrome 截胡了)。
    • Github 在任意页面输入 Ctrl+K 、Cmd+K ,都可以唤起窗口,但不影响 Chrome 其他的快捷键设置。好奇人家是怎么实现的。
    7 条回复    2022-09-27 01:01:16 +08:00
    JCZ2MkKb5S8ZX9pq
        1
    JCZ2MkKb5S8ZX9pq  
    OP
       2022-09-26 23:14:54 +08:00
    包括 vue 的官方文档,也是用 Ctrl+K 触发搜索,但没影响其他 Chrome 原本的快捷键。
    vopin
        3
    vopin  
       2022-09-26 23:29:12 +08:00 via iPhone
    preventDefault 可以用呀,不需要别的操作。
    JCZ2MkKb5S8ZX9pq
        4
    JCZ2MkKb5S8ZX9pq  
    OP
       2022-09-26 23:41:59 +08:00
    @huxins
    @vopin
    我也感觉 preventDefault 应该可以,但不知道为啥我判断组合键之后,它就先被浏览器占用了。
    我组合键大约有 10 组,我之前是怀疑判断时候那些微的耗时,会不会导致浏览器先占了。
    dcsuibian
        5
    dcsuibian  
       2022-09-26 23:54:39 +08:00
    document.body.addEventListener('keydown', event => {
    if ('p' === event.key.toLowerCase() && (event.getModifierState('Meta') || event.getModifierState('Control'))) {
    event.preventDefault()
    console.log('检测到组合键')
    }
    }, false)


    我是 Mac ,打印的快捷键是 command+p ,windows 上我猜应该是 ctrl+p
    实测,像是打印、查找是能够拦截住的,但打开新窗口的快捷键不行
    如果把'keydown'改成'keypress'也不行
    JCZ2MkKb5S8ZX9pq
        6
    JCZ2MkKb5S8ZX9pq  
    OP
       2022-09-27 00:19:59 +08:00
    @dcsuibian 好像是看有几个地方说 ctrl+N 不行,但我现在是 ctrl+shift+g 这种都不行,还在查。
    JCZ2MkKb5S8ZX9pq
        7
    JCZ2MkKb5S8ZX9pq  
    OP
       2022-09-27 01:01:16 +08:00
    好像忽然又可以了,谢谢各位。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   5300 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 29ms · UTC 05:50 · PVG 13:50 · LAX 21:50 · JFK 00:50
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.