项目场景：

比如项目是后台管理，常见的架构左侧菜单+右侧内容区域里边涉及到可视化，全屏切换的问题，测试提了一个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('点击退出全屏操作');
	    //在这里写退出全屏操作，比如侧边栏显示，头部内容显示等等
	  }
	});
}