網(wǎng)站首頁編程語言正文

React如何實現(xiàn)全屏監(jiān)聽Esc鍵_React

作者：咕咚咕咚咚 ? 更新時間： 2022-10-03 編程語言

全屏監(jiān)聽Esc鍵

全屏與退出全屏

if (isFull) {
? ? ? document.exitFullscreen();
? ? } else {
? ? ? tree.current.requestFullscreen();
? ? ? tree.current.style.width = '100%'
? ? }
? };

監(jiān)聽退出全屏事件

退出方式有兩種：

1.通過上面的requestFullscreen。
2.通過按esc退出

問題：通過requestFullscreen操作可以修改數(shù)據(jù)狀態(tài)，但當(dāng)用戶按esc鍵時，是監(jiān)聽不到的。

采用如下方式：?

const escFunction = () => {
   setFull((prevFill) => !prevFill); 
}
 
useEffect(() => {
    // 監(jiān)聽退出全屏事件 --- chrome 用 esc 退出全屏并不會觸發(fā) keyup 事件
    document.addEventListener("webkitfullscreenchange", escFunction); /* Chrome, Safari and Opera */
    document.addEventListener("mozfullscreenchange", escFunction); /* Firefox */
    document.addEventListener("fullscreenchange", escFunction); /* Standard syntax */
    document.addEventListener("msfullscreenchange", escFunction); /* IE / Edge */
    return () => {
    //銷毀時清除監(jiān)聽
      document.removeEventListener("webkitfullscreenchange", escFunction);
      document.removeEventListener("mozfullscreenchange", escFunction);
      document.removeEventListener("fullscreenchange", escFunction);
      document.removeEventListener("MSFullscreenChange", escFunction);
    }
  }, []);