用户点击 ESC 退出全屏事件绑定

by Jack Pu

最近做视频相关，在全屏的时候之前 自以为捕获 esc 就可以了。也就是:

document.addEventListener('keyup', (e) => {
  if (e.which === 27) {
    // your code
  }
})

然后实际上是没有什么效果，一查资料发现:

When fullscreen mode is successfully engaged, the document which contains the element receives a fullscreenchange event. When fullscreen mode is exited, the document again receives a fullscreenchange event.

也就是实际上我们需要触发 fullscreenchange 事件来实现退出全屏的事件绑定。

       function exitHandler() {
            const hideFunc = function() {
                // your code
            };
            if (document.webkitIsFullScreen === false){
                hideFunc();
            } else if (document.mozFullScreen === false) {
                hideFunc();
            } else if (document.msFullscreenElement === false) {
                hideFunc();
            } else if (document.fullscreen) {
                hideFunc();
            }
        }
        document.addEventListener('webkitfullscreenchange', exitHandler, false);
        document.addEventListener('mozfullscreenchange', exitHandler, false);
        document.addEventListener('fullscreenchange', exitHandler, false);
        document.addEventListener('MSFullscreenChange', exitHandler, false);

扩展阅读