My Code:

$('#divid').on('mozfullscreenchange webkitfullscreenchange fullscreenchange MSFullscreenChange', notify);

$('#divid').bind('mozfullscreenchange webkitfullscreenchange fullscreenchange MSFullscreenChange', notify);

webkitfullscreenchange works as expected, but mozfullscreenchange seems to do nothing.

.bind doesn't help either.

What am I doing wrong?

My Code:

$('#divid').on('mozfullscreenchange webkitfullscreenchange fullscreenchange MSFullscreenChange', notify);

$('#divid').bind('mozfullscreenchange webkitfullscreenchange fullscreenchange MSFullscreenChange', notify);

webkitfullscreenchange works as expected, but mozfullscreenchange seems to do nothing.

.bind doesn't help either.

What am I doing wrong?

• javascript
• jquery
• mozilla

• 1 Could you provide some background on what your end goal is? – OneHoopyFrood Commented May 13, 2015 at 17:02
• i need to know when user left fullscreen to validate input infos. – Allan Felipe Murara Commented May 13, 2015 at 17:17

3 Answers 3

According to the last ment here:

the event is fired at the document, not at the element that goes full-screen

They also say it is documented on mozilla developer pages.

So put the listener on a document, not on the element.

Thanks to simon, i forgot the moz documentation.

final mand :

   document.addEventListener("fullscreenchange", notify);
   document.addEventListener("webkitfullscreenchange", notify);
   document.addEventListener("mozfullscreenchange", notify);
   document.addEventListener("MSFullscreenChange", notify);

Mobile Safari and Chrome needed this to detect the exit of fullscreen:

  video.addEventListener('webkitendfullscreen', function () {
    // do stuff here
  }, false);