React如何實現全屏監聽Esc鍵

Posted on by

全屏監聽Esc鍵

全屏與退出全屏

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

監聽退出全屏事件

退出方式有兩種：

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

問題：通過requestFullscreen操作可以修改數據狀態，但當用戶按esc鍵時，是監聽不到的。

采用如下方式： 

const escFunction = () => {
   setFull((prevFill) => !prevFill); 
}
 
useEffect(() => {
    // 監聽退出全屏事件 --- chrome 用 esc 退出全屏並不會觸發 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 () => {
    //銷毀時清除監聽
      document.removeEventListener("webkitfullscreenchange", escFunction);
      document.removeEventListener("mozfullscreenchange", escFunction);
      document.removeEventListener("fullscreenchange", escFunction);
      document.removeEventListener("MSFullscreenChange", escFunction);
    }
  }, []);

React添加監聽事件 監聽鍵盤事件

react添加監聽事件監聽鍵盤事件

參考：

記錄下確認框confirm代碼：

以上為個人經驗，希望能給大傢一個參考，也希望大傢多多支持WalkonNet。

推薦閱讀：