The problem of listening to exit full screen event in vue

when listening to exit full screen event in vue, press the first esc key not to execute my event, only exit full screen, press the second click to execute

 quit() {
                let _this = this;
                document.onkeyup = function (e) {
                    let key = window.event.keyCode;
                    if (key === 27) {
console.log("")                    }
                };
            }
Mar.17,2022

Why not put

document.onkeyup = xxxx write to the outside?

if I understand it correctly, you only bind it when it exits, so you must console.log ('exit full screen') only the second time.


write

like this
{
    created(){
        window.addEventListener('keydown', this.quit)
    },
    beforeDestory(){
        window.removeEventListener('keydown', this.quit)
    }
    methods: {
        quit(e){
            let key = e.keyCode;
                    if (key === 27) {
console.log('')                    }
                };
        }
    }
}

this way is recommended

Document: fullscreenchange event-Web APIs | MDN

document.addEventListener('fullscreenchange', (event) => {
  // document.fullscreenElement will point to the element that
  // is in fullscreen mode if there is one. If there isn't one,
  // the value of the property is null.
  if (document.fullscreenElement) {
    console.log(`Element: ${document.fullscreenElement.id} entered full-screen mode.`);
  } else {
    console.log('Leaving full-screen mode.');
  }
});
Replace

with keydown event.


switch to onresize, Link description

Menu