Search code examples
javascripteventshtml5-fullscreen

Which JS events apart from `click` will successfully activate the Fullscreen API?

I've been refactoring some javascript.

Previously, I had an HTML element open to Fullscreen when the user clicked on another element.

Now clicking the latter element initiates a server-side verification, instead.

Once the server-side verification check passes, the page reloads with extra data confirming the user is verified.

N.B. When the page reloads, it does so with a non-negligible amount of extra markup, styles, scripts and vectors. The reason I am re-factoring in the first place is to avoid the need to download all these extra assets (and keep them in the background, on standby) unless and until the user authenticates themselves

The first thing I discovered is that I cannot have the page reload and then have the HTML element immediately open to Fullscreen, because - and this seems entirely reasonable from a UX perspective, Firefox reports:

Request for fullscreen was denied because Element.requestFullscreen() was not called from inside a short running user-generated event handler.

Essentially, unless the user pro-actively interacts with the page, the Fullscreen API will not run.

(In this scenario, the user pro-actively interacted with the page before reload, which is not the same thing.)

So, I thought about it and then added:

document.body.addEventListener('mousemove', () => myElement.requestFullscreen(), {once: true});

Nope. The Fullscreen API still doesn't activate.

To check that I wasn't making an elementary error somewhere else, I tried:

document.body.addEventListener('click', () => myElement.requestFullscreen(), {once: true});

Which does work.

So: some user-interactions will successfully fire the Fullscreen API and others won't.

I have searched through the WHAT-WG HTML Spec but I cannot find a list of events which represent explicit and pro-active user-interactions on a webpage.

Does such a list exist?

Which other events apart from click will successfully activate the Fullscreen API?

Solution

  • Which JS events apart from click will successfully activate the Fullscreen API?

    A small number of events will successfully activate the Fullscreen API.

    Almost all of these events either imply a user-click or directly reference one:

    • change
    • click
    • contextmenu
    • dblclick
    • mouseup
    • pointerup
    • reset
    • submit
    • touchend

    Further to the list of click-based events above, the Fullscreen API may also be activated via:

    Source: