解决了VUE在浏览器全屏下监听不到Esc键盘事件

说明:

  1. 实测可以在谷歌、火狐、360 浏览器使用

  2. 解决了在浏览器全屏下监听不到键盘Esc事件

  3. 解决了取消全屏和全屏的同步问题,ESC按键下可以同步

  4. 以下是完整的代码,



                
// data() { return { fullscreen: false, } }, created(){ let that = this window.onresize = function(){ if(!that.checkFull()){ // 退出全屏后要执行的动作 console.log("退出全屏") that.fullscreen = false; } } }, methods:{ checkFull(){ //判断浏览器是否处于全屏状态 (需要考虑兼容问题) //火狐浏览器 var isFull = document.mozFullScreen|| document.fullScreen || //谷歌浏览器及Webkit内核浏览器 document.webkitIsFullScreen || document.webkitRequestFullScreen || document.mozRequestFullScreen || document.msFullscreenEnabled if(isFull === undefined) { isFull = false } return isFull; }, // 全屏事件 handleFullScreen(){ let element = document.documentElement; if (this.fullscreen) { if (document.exitFullscreen) { document.exitFullscreen(); } else if (document.webkitCancelFullScreen) { document.webkitCancelFullScreen(); } else if (document.mozCancelFullScreen) { document.mozCancelFullScreen(); } else if (document.msExitFullscreen) { document.msExitFullscreen(); } } else { if (element.requestFullscreen) { element.requestFullscreen(); } else if (element.webkitRequestFullScreen) { element.webkitRequestFullScreen(); } else if (element.mozRequestFullScreen) { element.mozRequestFullScreen(); } else if (element.msRequestFullscreen) { // IE11 element.msRequestFullscreen(); } } this.fullscreen = !this.fullscreen; }, }

 

你可能感兴趣的:(解决了VUE在浏览器全屏下监听不到Esc键盘事件)