监听键盘事件,快捷键和浏览器本身快捷键冲突怎么处理呢

这个组件是全局加载的,一进去会addEventListener一个键盘事件,按Ctrl+Q唤起这个组件,但是这个快捷键,同样也是浏览器的一个快捷键,所以打开了组件又唤起了浏览器的行为,然后我加了e.preventDefault()e.stopPropagation()阻止浏览器行为,但是所有输入框都输入不了了,都被阻止了。有没有办法单单阻止浏览器呢,谢谢各位

mounted () {
    this.keyboardHandle = (e) => {
      e.preventDefault()
      e.stopPropagation()
      const { ctrlKey, shiftKey, altKey, keyCode } = e
      if (keyCode === 81 && ctrlKey && !shiftKey && !altKey) {
        this.visible = !this.visible
      }
    }
    document.addEventListener('keydown', this.keyboardHandle)
  },
阅读 5.2k
1 个回答
    应该先判断键盘按键, 再进行阻止;
        this.keyboardHandle = (e) => {
            const { ctrlKey, shiftKey, altKey, keyCode } = e;
            if (keyCode === 81 && ctrlKey && !shiftKey && !altKey) {
                this.visible = !this.visible;
                e.preventDefault();
                e.stopPropagation();
            }
        };
        document.addEventListener("keydown", this.keyboardHandle);
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题