项目场景：

在进入大屏页面时，页面自动全屏展示

---

问题描述

如果只是单纯的想要全屏效果，可使用如下代码：

function fullscreenCheck() {
  if (!document.fullscreenElement &&
      !document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement) {  // current working methods
    if (document.documentElement.requestFullscreen) {
      document.documentElement.requestFullscreen();
    } else if (document.documentElement.msRequestFullscreen) {
      document.documentElement.msRequestFullscreen();
    } else if (document.documentElement.mozRequestFullScreen) {
      document.documentElement.mozRequestFullScreen();
    } else if (document.documentElement.webkitRequestFullscreen) {
      document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
    }
  } else {
    if (document.exitFullscreen) {
      document.exitFullscreen();
    } else if (document.msExitFullscreen) {
      document.msExitFullscreen();
    } else if (document.mozCancelFullScreen) {
      document.mozCancelFullScreen();
    } else if (document.webkitExitFullscreen) {
      document.webkitExitFullscreen();
    }
  }
}
复制

遇到的问题：
如果直接运行这个函数，会报错，报错原因大概为 浏览器全屏API只能由用户手势触发；
而直接运行这个函数，相当于通过代码模拟点击事件，仍然是 不可以 的，报错和第一种情况一样；如下：

TypeError: fullscreen error
或
Failed to execute 'requestFullscreen' on 'Element': API can only be initiated by a user gesture

曾尝试通过控制键盘 F11 事件去让页面全屏，但同样也是不可以的；

---

原因分析：

全屏 API 允许网页以全屏的方式显示在用户的屏幕上，覆盖了操作系统和其他应用程序的界面。这样的能力可能会被恶意的网站或应用程序滥用，对用户造成困扰，并带来潜在的安全风险。为了避免这种滥用和保护用户的隐私，现代浏览器对全屏 API 进行了限制，并要求 必须 由用户手势触发。

---

解决方案：

1. 方法1：
   本人使用的方法：晓之以理，动之以情；告知产品经理需求暂不可行，要求其更改产品需求。
   最后将需求更改为：
   用户点击屏幕任何地方即可全屏或退出全屏，这样将本文 上方全屏代码 更改为点击事件，绑定到根元素上面即可

   问题：
   1、这样需要大屏的点击事件全部阻止冒泡
   2、使用最多的echarts图表阻止冒泡方法，代码如下：

  // echarts渲染
  myChart.setOption(optionCarRide.value, true);
  // echarts阻止冒泡  
  document.getElementById('XXXXXX——Id').addEventListener('click',event => {
     event.stopPropagation();
  })
复制

2. 方法2：如果你的大屏是在同一个页面切换显示，或是点击一个按钮，大屏是打开新的页面后显示的。请注意
   将你的全屏事件绑定在这个 “跳转” 按钮上面，并设置延时。这样在打开新的页面时，浏览器会认为是用户操作了全屏事件，依旧可以完成相对应的 伪全屏事件。可以满足此类需求。