HTML5进入退出全屏模式的api和浏览器自带的F11全屏的区别

HTML5进入和退出全屏模式的api网上有很多 ，一查就查到了，我主要说一下它和F11的区别：

HTML5：用于将dom元素全屏，例如body div img 等等

F11：只是隐藏了地址栏

首先贴出项目的照片：

image.png

项目中遇到的问题 ：在项目交给组长检查的时候，组长提出了一个问题，先按F11进入全屏，在点击这个按钮，结果没办法退出全屏模式了。这个问题研究了好一段时间 ，所以觉得有必要写一个东西来总结一下。
首先遇到一个问题，要去找它的原理，最原始的东西 这是解决一个问题很好的思路。在网上查了很多才找到一些好的有用的帖子，在使用F11进入全屏后，再去调用H5的退出全屏的api是没有用的，因为原理就不相同。

重点来了：浏览器在全屏时屏蔽了键盘事件的Esc和F11，所以退出全屏时不会触发键盘事件。
这句话的意思是没办法监听退出全屏事件。
解决问题的思路：既然没办法监听它，那就不用它，监听按下F11键的事件，然后取消浏览器的默认事件，也就是说让F11失效，然后再调用H5的api让它全屏 这样就成功解决问题了。总的来说一句话：当一件事由两个不同的条件控制时，让一个条件去取代另一个条件。

最后贴上代码 :

//在按钮上绑定fullScreen函数
data(){
  return{
     click:true
  }
},
method:{
   fullScreen() {
      if (this.click) {
        document.body.webkitRequestFullscreen();
        this.click = false;
      } else if (!this.click) {
        document.webkitCancelFullScreen();
        this.click = true;
      }
    }
},
  mounted(){
    document.onkeydown = (event) => { //监听整个键盘的onkeydown事件
      if ( event.keyCode == 122) {
        event.preventDefault(); //阻止浏览器的默认行为
        this.fullScreen(); //调用H5的api
      }
    };
  }
//这里H5的api不同浏览器实现的方法不同，请自行加上