无法全屏收听“Escape”键事件

Question

我正在尝试通过一个按钮使其全屏显示。该按钮既添加了 css 又创建了按 f11 的效果。我正在尝试使用 eventListener 听按下按钮后按下“Escape”键的那一刻（添加 css 并按下 f11），但我必须按 2 次“Escape”键，因为 eventListener 不起作用在第一时间。我该如何解决这种情况？我对你的所有建议持开放态度。谢谢。

const handleFullScreen = () => {
    if (isFullScreen) {
        setIsFullScreen(!isFullScreen);
        document.exitFullscreen();
    } else {
        setIsFullScreen(!isFullScreen);
        document.documentElement.requestFullscreen();
    }
};

useEffect(() => {
    document.addEventListener('keydown', (e) => {
        if (e.key === 'Escape') {
            setIsFullScreen(isFullScreen);
        }
    });
    // eslint-disable-next-line react-hooks/exhaustive-deps
}, []);

返回：

<Button
    onClick={() => handleFullScreen()}
    style={{ marginRight: 10 }}
    isOutline
    color='info'>
    {t('fullscreen')}
</Button>

<div className={`${isFullScreen ? `fullScreen` : ``}`}>
    ..
</div>

css:

.fullScreen {
position: absolute;
width: 100%;
height: 100vh;
overflow: hidden;
z-index: 1020;
top: 0;
left: 0;
}

Answer 1

退出全屏模式时，Chrome 不会触发按键事件。您需要定义一个事件监听器来监听全屏模式的变化。

试试这个：

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

然后在用户退出全屏时通过调用处理程序执行操作

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

这是一个没有 CSS 的完整示例：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
Fullscreen:  
<div class="col-sm-5">
    <button type="button" class="btn btn-lg btn-toggle myswitch" data-toggle="button" aria-pressed="false" onclick="fullscreen()" autocomplete="off">
    <div class="handle"></div>
    </button>
</div>
<script>
function fullscreen() {
    if ((document.fullScreenElement && document.fullScreenElement !== null) ||
        (!document.mozFullScreen && !document.webkitIsFullScreen)) {
        if (document.documentElement.requestFullScreen) {
            document.documentElement.requestFullScreen();
        } else if (document.documentElement.mozRequestFullScreen) {
            document.documentElement.mozRequestFullScreen();
        } else if (document.documentElement.webkitRequestFullScreen) {
            document.documentElement.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
        }
    } else {
        if (document.cancelFullScreen) {
            document.cancelFullScreen();
        } else if (document.mozCancelFullScreen) {
            document.mozCancelFullScreen();
        } else if (document.webkitCancelFullScreen) {
            document.webkitCancelFullScreen();
        }
       $('.myswitch').removeClass('active')
    }
}

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

function exitHandler() {
    if (!document.fullscreenElement && !document.webkitIsFullScreen && !document.mozFullScreen && !document.msFullscreenElement) {
        $('.myswitch').removeClass('active')
    document.getElementById("myonoffswitch").click();
        console.log("this is not fullscreen");
        $(".onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner").css("margin-right","");
    } else {
        console.log("this fullscreen");
        $(".onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner").css("margin-left","");
    }
}
</script>