原因:在某个元素全屏时,点击 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>

Logo

魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。

更多推荐