快捷導(dǎo)航

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

更新時(shí)間：2022年08月08日 16:46:30 作者：咕咚咕咚咚

這篇文章主要介紹了React如何實(shí)現(xiàn)全屏監(jiān)聽Esc鍵，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

全屏監(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鍵時(shí)，是監(jiān)聽不到的。

采用如下方式：

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

React添加監(jiān)聽事件監(jiān)聽鍵盤事件

react添加監(jiān)聽事件監(jiān)聽鍵盤事件

參考：

記錄下確認(rèn)框confirm代碼：

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

React事件處理過程中傳參的實(shí)現(xiàn)方法
這篇文章主要介紹了React事件處理過程中傳參的實(shí)現(xiàn)方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)吧
2022-10-10
淺析React中的受控組件和非受控組件
具體來說這是一種react非受控組件，其狀態(tài)是在input的react內(nèi)部控制，不受調(diào)用者控制?？梢允褂檬芸亟M件來實(shí)現(xiàn)。下面就說說這個(gè)React中的受控組件與非受控組件的相關(guān)知識(shí)，感興趣的朋友一起看看吧
2021-05-05
Redux saga異步管理與生成器詳解
這篇文章主要介紹了Redux saga異步管理與生成器，工作中使用了redux-saga這個(gè)redux中間件，如果不明白內(nèi)部原理使用起來會(huì)讓人摸不著頭腦，閱讀源碼后特意對(duì)其原理做下總結(jié)
2023-02-02
教你如何實(shí)現(xiàn)在react項(xiàng)目中嵌入Blazor
這篇文章主要介紹了如何實(shí)現(xiàn)在react現(xiàn)有項(xiàng)目中嵌入Blazor,通過這個(gè)案例我們可以知道 blazor也可以像react那樣嵌入在任何的現(xiàn)有項(xiàng)目中，并且使用方便，需要的朋友可以參考下
2023-01-01
用react實(shí)現(xiàn)一個(gè)簡(jiǎn)單的scrollView組件
這篇文章主要給大家介紹一下如何用 react 實(shí)現(xiàn)一個(gè)簡(jiǎn)單的 scrollView組件，文中有詳細(xì)的代碼示例，具有一定的參考價(jià)值,需要的朋友可以參考下
2023-07-07
在react中使用vuex的示例代碼
這篇文章主要介紹了在react中使用vuex的示例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-07-07
React Hook 父子組件相互調(diào)用函數(shù)方式
這篇文章主要介紹了React Hook 父子組件相互調(diào)用函數(shù)方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-09-09
React 組件渲染和更新的實(shí)現(xiàn)代碼示例
這篇文章主要介紹了React-組件渲染和更新的實(shí)現(xiàn)代碼示例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2019-02-02
react使用websocket實(shí)時(shí)通信方式
這篇文章主要介紹了react使用websocket實(shí)時(shí)通信方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-09-09
React實(shí)現(xiàn)文件上傳和斷點(diǎn)續(xù)傳功能的示例代碼
這篇文章主要為大家詳細(xì)介紹了React實(shí)現(xiàn)文件上傳和斷點(diǎn)續(xù)傳功能的相關(guān)知識(shí),文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
2024-02-02