Cannot listen to 'Escape' key event in full screen-CodePudding

I'm trying to make it full screen via a button. The button both adds css and creates the effect of pressing f11. I am trying to listen to the moment of pressing the 'Escape' key after the button is pressed(added css and pressed f11), with the eventListener, but I have to press the 'Escape' key 2 times because the eventListener does not work in the first time. How can I solve this situation? I am open to all your suggestions. Thank you.

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
}, []);

Return:

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

CodePudding user response：

Chrome will not fire a key event when exiting full screen mode. You need to define an event listener that listens for a change to full screen mode.

Try this:

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

then perform action when user is exiting full screen by calling handler

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

Here is a complete example without the 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>