vue中监听ESC事件第一次点击只会触发浏览器退出全屏事件，第二次才触发自己写的监听

项目场景：

比如项目是后台管理，常见的架构左侧菜单+右侧内容区域里边涉及到可视化，全屏切换的问题，测试提了一个bug，全屏后点击ESC只取消了浏览器全屏，取消后全屏菜单栏不显示，比如侧边栏和头部还处于隐藏状态，解决结果如下

问题描述

首先采用vue中监听退出全屏事件时，按第一下esc键不执行我的事件只退出全屏打印都不打印，按第二下才执行：

mounted() {//监听键盘Esc按键事件this.$nextTick(function() {// 按下键盘document.addEventListener('keydown', function(e) {// Esc按键是27 if (e.keyCode == 27) {//在这里写你的操作逻辑console.log("打印了");//在这里写退出全屏操作，比如侧边栏显示，头部内容显示等等}});});
}

---

解决方案：

mounted() {//监听键盘Esc按键事件document.addEventListener('fullscreenchange', (event) => {if (document.fullscreenElement) {console.log(‘11111可以不用管’);} else {console.log('点击退出全屏操作');//在这里写退出全屏操作，比如侧边栏显示，头部内容显示等等}});
}