除了 `click` 之外还有哪些 JS 事件会成功激活全屏 API?

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

我一直在重构一些 javascript。

以前,当用户单击另一个元素时,我有一个 HTML 元素打开 Fullscreen

现在单击后一个元素会启动服务器端验证。

服务器端验证检查通过后,页面会重新加载额外数据以确认用户已通过验证。

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

我发现的第一件事是我无法重新加载页面,然后然后立即打开HTML元素全屏,因为 - 从用户体验的角度来看,这似乎是完全合理的,Firefox 报告:

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

本质上,除非用户主动与页面交互,全屏API 不会 运行.

(在这种情况下,用户在重新加载 之前主动与页面进行交互 ,这不是一回事。)

所以,我想了想,然后补充说:

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

没有。 全屏 API 仍然没有激活。

为了检查我没有在其他地方犯基本错误,我尝试了:

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

哪个有效。

因此:一些用户交互将成功触发 全屏 API 而其他人则不会。

我搜索了 WHAT-WG HTML Spec,但我找不到代表网页上明确和主动的用户交互的事件列表。

是否存在这样的列表?

click 之外还有哪些事件会成功激活 全屏 API?

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

少量事件将成功激活全屏API

几乎所有这些事件都暗示了一个 user-click 或直接引用了一个:

  • 改变
  • 点击
  • 上下文菜单
  • dblclick
  • 鼠标弹起
  • 向上指针
  • 重置
  • 提交
  • 触摸端

除了上面的 click-based 事件列表之外,全屏 API 也可以通过以下方式激活:


来源: