浏览器全屏状态下监听esc,触发自定义事件

2,476 阅读1分钟

浏览器默认不允许监听Esc

Chrome退出全屏模式时不会触发按键事件。你需要定义一个事件监听器来监听fullscreenchange事件(全屏模式的变化),就像这样(这个东西没有很好地标准化,所以你需要监听不同浏览器触发的事件)

if (document.addEventListener) {
            document.addEventListener('webkitfullscreenchange', exitHandler, false);
            document.addEventListener('mozfullscreenchange', exitHandler, false);
            document.addEventListener('fullscreenchange', exitHandler, false);
            document.addEventListener('MSFullscreenChange', exitHandler, false);
        }

然后,当浏览器触发此事件时,它将调用exitHandler你自定义的函数,并且你可以通过执行以下操作在用户退出全屏模式时执行操作:

function exitHandler() {
        if (!document.webkitIsFullScreen && !document.mozFullScreen && !document.msFullscreenElement) {
            ... do something here
        }
    }