Jquery 如果使用F11触发，则全屏API不工作

我为我的应用程序实现了一个全屏切换功能，它实际上运行良好，在最新的Chrome、Firefox、IE和Opera上进行了测试。我有一种激活和一种停用全屏模式的方法：

  public deactivateFullscreen(element) {
    if (element.requestFullscreen) {
      element.requestFullscreen();
    } else if (element.webkitRequestFullscreen) {
      document.webkitCancelFullScreen();
    } else if (element.mozRequestFullScreen) {
      document.mozCancelFullScreen();
    }else if(element.msRequestFullscreen){
      document.msExitFullscreen();
    }
  }

  public activateFullscreen(element) {
    if (element.requestFullScreen) {
      element.requestFullScreen();
    } else if (element.webkitRequestFullScreen) {
      element.webkitRequestFullScreen();
    } else if (element.mozRequestFullScreen) {
      element.mozRequestFullScreen();
    }else if(element.msRequestFullscreen){
      element.msRequestFullscreen();
    }
  }

所以当从UI触发时，它们都可以正常工作。唯一的问题是，一旦我使用

F11

进入全屏模式，我就无法使用

停用屏幕功能退出全屏模式。据我所知，一旦我点击
F11
，浏览器中就不会设置任何标志。我尝试使用以下方法对其进行测试：

  public isFullscreen(element) {
    if(element.webkitIsFullScreen || element.mozFullscreen || element.msFullscreenElement || element.fullscreenElement || element.fullscreen || element.webkitFullscreenElement || element.mozFullScreenElement){
      return true;
    }
    return false;
  }

无论我是否全屏显示，这总是返回false。是否有其他方法检测浏览器当前是否处于全屏模式？还是我在这里遗漏了一些概念

我尝试的另一件事是捕捉
F11
的keydown事件并阻止其默认操作

$document.on('keydown',this.fsHandle);

  public fsHandle(event:KeyboardEvent){
    if(event.keyCode == 122){
      event.preventDefault();
      this._isFullscreen = !this._isFullscreen;
    }
  }

使用此方法，我希望抑制任何
F11
事件，以便通过代码手动处理全屏切换。不幸的是，这也不起作用。原因似乎有点奇怪，当我已经在全屏时，按键事件根本没有被触发。因此，我可以在全屏模式之外抑制该事件，但不能在我进入该模式后立即抑制该事件

更新：
一些研究表明，浏览器供应商的安全顾虑是导致这种行为的原因。仍然需要有一种方法来处理此类功能。
使用shortcut.js来操作按下的键。很好

示例代码：

shortcut.add("F11",function() {
    alert("F11 PRESS");
});

或

到目前为止，这似乎是不可能的

看，那是在问同样的问题。
但这是一个不断演变的情况，值得不时地重新审视，所以这里是我收集的一些细节

有评论说：

这种全屏窗口模式依赖于操作系统，仅在应用程序级别，不与我们这些可怜的web开发人员可用的任何API相关联。[…]你找不到任何跨浏览器/跨操作系统的黑客（我甚至不知道我自己的浏览器/操作系统有什么）。你能得到东西的唯一方法是通过一个更强大的API，让你的应用程序可以访问浏览器的窗口

允许以编程方式控制全屏状态的API是在中定义的，我希望它能阐明这个问题。浏览器还没有完全实现它（例如，
document.exitFullscreen（）
没有在Chrome中实现，并且
document.webkitExitFullscreen（）
没有返回一个
承诺，但是它给出了关于事情发展方向的提示。不幸的是，它没有提到预先存在的全屏浏览器功能（由F11触发的功能），因此很难说这将如何发展

就目前而言，F11全屏和编程全屏是两种不同的东西，尽管它们之间并不是完全孤立的。此外，例如在macOS上，浏览器的“全屏”功能是完全不同的，因为它占用了整个屏幕，但仍然可以显示地址栏和/或选项卡

如果检查包装特定于浏览器的实现的库，则可以看到：


以编程方式设置主体或任何元素全屏时，浏览器将应用（例如，背景变为黑色）
F11全屏显示时不会出现这种情况
这也不会发生在文档上的编程全屏（
document.documentElement
）上，因此这是您可以从F11全屏上获得的最接近的

但这并不能使F11-FS和doc元素上的编程FS等效：


动画过渡是不同的（实际上有点笨重，例如在Firefox和document元素上的编程全屏，因为它在黑色背景的预期下逐渐变为黑色，但当fullscreen元素是document时，没有黑色背景，如上所述）
F11全屏显示时，
document.documentElement==（document.msFullscreenElement | | | document.fullscreenElement | | document.webkitFullscreenElement | | document.mozFullScreenElement）
为false，但在document元素上编程全屏显示时为true（在Chrome&Firefox&IE11上验证）
F11键可以退出编程全屏，但编程退出全屏无法退出F11全屏。这就是你遇到的问题。此外，Esc键不能退出F11全屏，但会退出编程全屏

那么，我们该怎么办呢？
由于有两种不同的功能，也许可以让它们保持不变：如果用户进入F11全屏，他们将知道如何通过再次按相同的键退出。如果他们使用您的UI控件进入编程全屏，请确保您清楚地知道如何退出。作为一个开发人员，不能100%地控制这两个方面可能会令人沮丧（可以理解），但实际上用户可能会很好，因为他们会使用其中一个或另一个。
您可以使用
显示模式：全屏
媒体查询，它可以正确地捕获全屏API更改和F11

CSS版本：

#全屏：：之前{
内容:"不";；
}
@媒体（显示模式：全屏）{
#全屏：：之前{
内容：无；
}
}
fullscreen
我认为这将对您有所帮助不幸的是，您的示例在全屏模式下不会触发回调！在全屏状态下，我仍然无法捕捉任何关键事件。很抱歉，这并不能解决问题。我会要求您删除您的答案，以防没有更高评级的回复，这将是不应得的赏金。因此，这个问题的答案是：这是不可能的。一旦全屏显示，它需要按F11禁用，您无法停止它。