使用“Esc”键一次完成两个任务

Question

在 THIS 页面上，点击播放器的切换全屏按钮，我有一个“视频包装”女巫的div，是动态添加了一个“全屏”类。

我的目标是通过使用切换全屏按钮，但通过按键盘上的“Esc”来删除“全屏”类 。为此，我写了代码：

$(document).on('keyup',function(evt) {
    if (evt.keyCode == 27 && $('.video-wrapper').hasClass('full-screen')) {
        console.log(evt.keyCode);
        $('.video-wrapper').removeClass("full-screen");
        $('input.fullscreen').removeClass('active');
    }
});

问题是这需要两个“Esc”键击而不是一个。第一个只存在浏览器的全屏模式，第二个删除“全屏”类。

如何使用浏览器的全屏模式 和 删除带有“Esc”键击的“全屏”课程？

Answer 1

你知道Esc实际上是在运行你的功能还是只是做它的原生行为？也许你需要e.preventDefault

Answer 2

试试这个

document.addEventListener('webkitfullscreenchange', onFullScreen, false);
document.addEventListener('mozfullscreenchange', onFullScreen, false);
document.addEventListener('fullscreenchange', onFullScreen, false);
document.addEventListener('MSFullscreenChange', onFullScreen, false);

function onFullScreen()
{
    if (document.webkitIsFullScreen || document.mozFullScreen || document.msFullscreenElement != null){ return false; }
    $('.video-wrapper').removeClass("full-screen");
}