░░░░░░░░░ JS监听键盘事件和浏览器快捷键冲突解决方案 ░░░░░░░░░

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

解决方法:应该先判断键盘按键, 再进行阻止!

this.keyboardHandle = (e) => {
  const { ctrlKey, shiftKey, altKey, keyCode } = e;
  if (keyCode === 83 && ctrlKey && !shiftKey && !altKey) {
    this.visible = !this.visible;
    e.preventDefault();
    e.stopPropagation();
    alert("和默认的保存网页快捷键不冲突了!")
  }
};
document.addEventListener("keydown", this.keyboardHandle);