React如何实现全屏监听Esc键

目录
  • 全屏监听Esc键
    • 全屏与退出全屏
    • 监听退出全屏事件
  • React添加监听事件 监听键盘事件
    • react添加监听事件监听键盘事件

全屏监听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代码：

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • React-router4路由监听的实现

    React-router4路由监听的实现

    React-router 4 React Router4是一个纯React重写的包,现在的版本中已不需要路由配置,一切皆组件. 问题出发点 最近在一个新的H5项目中使用了react router 4 ("react-router-dom": "^4.2.2"),项目中的一部分页面是需要给app客户端的同学使用,这样H5项目中的title就不能一成不变,需要显示对应页面的title,所以,我们就需要去监听路由变动来更改title. 思路 在react中,例如:在父路由

  • 详解React setState数据更新机制

    为什么使用setState 在React 的开发过程中,难免会与组件的state打交道.使用过React 的都知道,想要修改state中的值,必须使用内部提供的setState 方法.为什么不能直接使用赋值的方式修改state的值呢?我们就分析一下,先看一个demo. class Index extends React.Component { this.state = { count: 0 } onClick = () => { this.setState({ count: 10 }) } re

  • React如何优雅的捕获异常

    目录 前言 ErrorBoundary Error Boundary 之外 try/catch window.onerror , error事件 unhandledrejection XMLHttpRequest 与 fetch 事件处理程序的异常捕获 示例 类型定义 自定义的CatchError 装饰器 总结一下 下一步 写在最后 前言 人无完人,所以代码总会出错,出错并不可怕,关键是怎么处理. 我就想问问大家react的应用的错误怎么捕捉呢? 这个时候: 小白+++:怎么处理? 小白++:

  • React如何实现全屏监听Esc键

    React如何实现全屏监听Esc键

    目录 全屏监听Esc键 全屏与退出全屏 监听退出全屏事件 React添加监听事件 监听键盘事件 react添加监听事件监听键盘事件 全屏监听Esc键 全屏与退出全屏 if (isFull) {       document.exitFullscreen();     } else {       tree.current.requestFullscreen();       tree.current.style.width = '100%'     }   }; 监听退出全屏事件 退出方式有两种

  • vue中对监听esc事件和退出全屏问题的解决方案

    vue中对监听esc事件和退出全屏问题的解决方案

    目录 对监听esc事件和退出全屏问题的解决 下面是全屏的完整代码 element+vue全屏与退出全屏(监听ESC改样式) 一.效果 二.代码 对监听esc事件和退出全屏问题的解决 vue 的项目中使用了 h5 的全屏 API,在使用esc键退出全屏时,默认调用“ document.exitFullScreen() ” 直接退出,想要做监听并设置业务,需要监听屏幕size变化来出发事件 mounted() {          let that = this     window.addEven

  • React自定义视频全屏按钮实现全屏功能

    目录 前言 一.绘制全屏按钮 二.编写点击事件 三.编写相关函数 提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 前言 React自定义视频全屏按钮,实现全屏功能. 一.绘制全屏按钮 绘制全屏按钮,并绑定点击事件: render() { return ( <div className={'fullfrequency'}> <img src={require("./全屏.png") } id="picts" onClick={thi

  • React实现组件全屏化的操作方法

    React实现组件全屏化的操作方法

    介绍 本文基于React+antd,给大家演示一个完整的全屏demo. 起因是开发今天给我提了一个sql编辑器输入框比较小,不支持放大,不太方便.希望能够全屏显示,联想到自己以后可能也会需要,便研究并记录之. 其实我觉得也没有很小(orz) 全屏 大家应该都在web页面里面见过全屏按钮,点击它以后页面就成了全屏,经常会在代码编辑器中出现. 上图就是leetcode全屏后的效果了,省略了菜单等内容. 看起来全屏展示分为很多种,我说说我的看法. leetcode这种 它只是页面全屏 F11 我们可以

  • Android onKeyDown监听返回键无效的解决办法

     Android onKeyDown监听返回键无效的解决办法 当我们的Activity继承了TabActivity,在该类中重写onKeyDown是监听不到返回键的, 具体解决方法如下: 重写dispatchKeyEvent /** * 退出 */ @Override public boolean dispatchKeyEvent(KeyEvent event) { if (event.getKeyCode() == KeyEvent.KEYCODE_BACK && event.getAc

  • Android监听Home键实例详解

    本文实例讲述了Android监听Home键的方法.分享给大家供大家参考,具体如下: 将到android中Home键的监听,很多人第一反应时重写相应Activity的onKeyDown()方法,监听当按下的键的keyCode为KEYCODE_HOME时,进行自己的相应的处理.如: @Override public boolean onKeyDown(int keyCode, KeyEvent event) { if (keyCode == KeyEvent.KEYCODE_HOME) { stop

  • Android 解决监听home键的几种方法

    Android 解决监听home键的几种方法

    Android 解决监听home键的几种方法 前言: 以下两种方法可以完美解决监听back键,home键,多任务键(最近任务键). 一.使用注册广播监听home键.多任务键 演示图 创建一个广播代码如下: class InnerRecevier extends BroadcastReceiver { final String SYSTEM_DIALOG_REASON_KEY = "reason"; final String SYSTEM_DIALOG_REASON_RECENT_APP

  • Android监听home键的方法详解

    本文实例分析了Android监听home键的方法.分享给大家供大家参考,具体如下: 如何知道Home按钮被点击了呢?做launcher的时候,看源代码发现原因 如果你的Activity具备这些属性 <activity android:name="com.woyou.activity.HomeActivity" android:launchMode="singleInstance" > <intent-filter> <action an

  • Android中监听Home键的4种方法总结

    昨天需要处理一个问题,需要监听home键.最开始想到使用onKeydonwn这个方法.但是发现home不能这样处理,onKeydonwn可以处理菜单键和back键,但home不能.因为home键是系统键,情况特殊一些. 看了一下网上的资料,说下面的方法可以.(其实不行) 复制代码 代码如下: @Override     public void onAttachedToWindow() {         // TODO Auto-generated method stub         Log

  • Android开发实现Fragment监听返回键事件功能的方法

    本文实例讲述了Android开发实现Fragment监听返回键事件功能的方法.分享给大家供大家参考,具体如下: 前面的文章Android开发教程之Fragment定义.创建与使用方法详细讲述了Fragment的基本概念与用法.这里再来分析一下Fragment监听返回键事件的具体应用. 背景 项目要求用户注册成功后进入修改个人资料的页面,且不允许返回到上一个页面,资料修改完成后结束当前页面,进入APP主页. 由于是使用多个Fragment完成注册流程,就需要Fragment监听用户点击手机上的返回

随机推荐