使用“Esc”键一次完成两项任务答案

【问题标题】：Use "Esc" key to accomplish two tasks at once使用“Esc”键一次完成两项任务
【发布时间】：2017-04-25 15:17:22
【问题描述】：

在 THIS 页面上，我有一个带有“video-wrapper”类的 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”键删除“全屏”类？

【问题讨论】：

如果你把它改成keydown而不是up，它可以工作吗？
不，不是
看起来像一个时间问题，因此解决方案可能是将所有代码包装在一个大约十分之一 (100) 秒的超时函数内 ($(document).on('keyup' ,function(evt) {) sitepoint.com/jquery-settimeout-function-examples
不，我测试了，问题不在于。
oki, -- 如果您发现控制台中有错误需要解决 (GET angelarusu.net/test/googleads_ima_html5_samples/advanced/l.css net::ERR_BLOCKED_BY_CLIENT ls.php:7 GET imasdk.googleapis.com/js/sdkloader/ima3.js net::ERR_BLOCKED_BY_CLIENT ls.php :8 GET angelarusu.net/test/googleads_ima_html5_samples/advanced/… net::ERR_BLOCKED_BY_CLIENT ls.php:306 Uncaught ReferenceError: Application is not defined at window.onload (ls.php:306) window.onload @ ls.php:306) 你需要使用 https:// /........

标签： javascript android jquery html key

【解决方案1】：

试试这个

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");
}

【讨论】：

这是在做什么？为什么需要 4 个不同的事件监听器？

【解决方案2】：

您知道 Esc 是实际运行您的函数还是只是执行它的本机行为？也许你需要e.preventDefault

【讨论】：

我希望两者兼得。
对。我认为您的第一个 Esc 只是本机退出全屏但没有运行该功能。
如何让它通过函数运行？
试试这个：$(document).on('keyup',function(evt) { (evt).preventDefault; if (evt.keyCode == 27 && $('.video-wrapper' ).hasClass('全屏')) { console.log(evt.keyCode); $('.video-wrapper').removeClass("全屏"); $('input.fullscreen').removeClass ('活动'); } });
我刚做了。没有任何改变。