How to check if user is in fullscreen mode inside a vue component?

Question

I have a vue component and I wanted to track when the user changes the browser to fullscreen or exits the full screen. I tried adding event listeners when the component is mounted but these events are never called when I try to go full screen or return to the windowed mode. No errors are displayed in the console. The component itself is not full screen. I have a laravel blade page running and this code is inside one of the vue components being displayed there.

Here is the code in the Vue Component:

<script>
    export default {
        mounted() {
            document.addEventListener('fullscreenchange',this.logFullScreen);
            console.log("Mounted");
        },
        methods: {
            currentDatetime: function () {
                var today = new Date();
                var date = today.getFullYear()+'-'+(today.getMonth()+1)+'-'+today.getDate();
                var time = today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds();
                return date+' '+time;
            },
            logFullScreen: function () {
                if(document.fullscreenElement)
                {
                    console.log("Changed to fullscreen at "+this.currentDatetime);
                }
                else
                {
                    console.log("Exited fullscreen at "+this.currentDatetime);
                }
            }
        },
        destroyed() {
            document.removeEventListener('fullscreenchange',this.logFullScreen);
        }
    }
</script>

Answer 1

When you go fullscreen by clicking F11. The event 'fullscreenchange' won't be triggerd.

fullscreenchange event is triggered when a fullscreenrequest is invoked.

You can try this:

$(document).on('keydown', function(event) {
    if (event.which == 122) {
        // check if fullscreen or not ...
    }
});

Sorry for my bad English