ESC键，在页面全屏状态下，点击ESC退出全屏监听不到解决办法

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

原创最新推荐文章于 2024-08-21 15:54:35 发布 · 1.3k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #vue.js

文章讨论了在Vue组件中，ESC键在页面全屏状态下点击无法正常触发退出全屏的监听问题。解决方案是使用`fullscreenchange`事件代替`keyup`，当全屏状态改变时检查是否退出全屏。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题：ESC键，在页面全屏状态下，点击ESC退出全屏监听不到

mounted() {
       //添加键盘Esc事件
      document.addEventListener("keyup", e => {
        if (e.keyCode == 27) {
          console.log(‘99999999999999999999999’);
        }
      });
}

全屏状态下点击ESC 退出全屏的同时浏览器不会打印 99999999999999999999999
点击第二次才会打印

解决方法

mounted() {
       document.addEventListener('fullscreenchange', (event) => {
          if (document.fullscreenElement) {
             变大了
          } else {
             变小了
          }
        });
}