解决vue在某元素全屏时，点击 ESC 按键，监听不到addEventListener(‘keydown‘事件

最新推荐文章于 2024-08-21 15:54:35 发布

没有昵称的昵称lf

最新推荐文章于 2024-08-21 15:54:35 发布

阅读量1.8k

点赞数 2

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/m0_48308579/article/details/130606714

版权

原因：在某个元素全屏时，点击 ESC 按键无法被正常捕获的原因是与焦点有关。当按下 ESC 键时，焦点落在文档上而不是目标元素上。

思路：查阅了一些解决方法后，发现都是将焦点恢复到目标元素上，但是并没有解决我的问题，在过程中，发现了fullscreenchange事件监听器，只要监听到全屏事件，改变了状态，就可以实现我的功能，关键代码如下。

<script>
export default {
 mounted() {
    // 添加全屏事件监听器
    const fullscreenElement = this.$refs.fullscreenElement;
    fullscreenElement.addEventListener('fullscreenchange', () => {
      if (this.isElementFullScreen()) {
        fullscreenElement.focus();
      } else {
        this.setIsFullScreen(false)
      }
    });
  },
 methods:{
  // 判断当前目标元素是否处于全屏状态
    isElementFullScreen() {
      const fullScreenElement =
        document.fullscreenElement ||
        document.webkitFullscreenElement ||
        document.mozFullScreenElement ||
        document.msFullscreenElement;
     return fullScreenElement === this.$refs.fullscreenElement;
   },
};
</script>