让某个元素全屏，出现异常，变成整个页面全屏同时页面无法操作（如输入框、按钮都失效）

Question

需求要实现某个组件全屏，代码如下

// 全屏
    toggleScreenfull () {
      const ele = document.getElementById(this.cardId)// 设置后就是   id==con_lf_top_div 的容器全屏
      if (this.fullscreen) {
        const exitFunc = document.exitFullScreen || document.mozCancelFullScreen || document.webkitExitFullscreen || document.msExitFullscreen
        exitFunc.call(document)
      } else {
        // const func = ele.requestFullscreen || ele.mozRequestFullScreen || ele.webkitRequestFullscreen || ele.msRequestFullscreen
        // func.call(ele)
        try {
          if (ele.requestFullscreen) {
            ele.requestFullscreen()
          } else if (ele.msRequestFullscreen) {
            ele.msRequestFullscreen()
          } else if (ele.mozRequestFullScreen) {
            ele.mozRequestFullScreen()
          } else if (ele.webkitRequestFullscreen) {
            ele.webkitRequestFullscreen()
          }
        } catch (e) {
          console.log('全屏异常---')
          console.log(e)
        }
      }
    },

全屏理想情况：

全屏异常情况（效果看起来像整个页面全屏，同时页面无法操作，如：输入框、按钮都失效）：

请问哪位大神有什么解决方案吗？

看网上说该api的流程是：
①调用这个元素对象的 requestFullscreen()方法；
②浏览器将元素全屏显示，改变相关的属性值，然后触发 document 的 fullscreenchange事件；
③退出全屏时有两种方式，一种是默认的按 ESC键退出，一种是调用 document的 exitFullscreen() 方法；
④浏览器将元素退出全屏显示，改变相关属性值，再次触发 fullscreenchange
方法。

猜想是不是②最后触发 document 的 fullscreenchange事件时出错了

Answer 1

只是下拉失效还是所有的？如果下拉失效的话可能是下拉内容不在全屏节点下导致不显示。如果是连点击按钮都没反应，就不太清楚了。得查看是否进入点击事件

Answer 2

我也遇到了这样的情况 请问解决方案是什么 谢谢你 也是进入全屏后 无法点击其他事件 目前 不知道是什么情况