React冒泡和阻止冒泡的应用详解

阻止事件冒泡分三种：

1：阻止合成事件往最外层document上的事件冒泡，用e.nativeEvent.stopImmediatePropagation();

2: 合成事件间的冒泡，使用 e.stopPropagation()；

3：阻止合成事件，往处理document上的其他原生事件冒泡，需要通过e.target来判断，示例代码如下。

import React,{ Component } from 'react';
import ReactDOM,{findDOMNode} from 'react-dom';

class Counter extends Component{
constructor(props){
super(props);

this.state = {
count:0,
    }
  }

handleClick(e){
this.setState({count:++this.state.count});
  }
render(){
return(
<div ref="test">
<p>{this.state.count}</p>
<a ref="update" onClick={(e)=>this.handleClick(e)}>更新</a>
</div>
    )
  }

componentDidMount() {
document.body.addEventListener('click',e=>{
// 通过e.target判断阻止冒泡
      if(e.target&&e.target.matches('a')){
return;
      }
console.log('body');
    })
  }
}

var div1 = document.getElementById('content');

ReactDOM.render(<Counter/>,div1,()=>{});

需求

最近在写react的项目，需要手写一个自定义的菜单，和antd的menu不同，需要点击一级菜单后弹出类似一个Drawer展示二级和三级菜单，且菜单样式自定义，都在一个Drawer里展示。

难点

其中难点在于点击一级菜单时弹出Drawer，点击除Drawer和一级菜单项之外的dom，Drawer收起。

问题

乍一想就是给document添加一个点击事件监听，给Drawer和一级菜单添加阻止冒泡，思路确实如此，后面实现中发现：
react为提高性能，有自己的一套事件处理机制，相当于将事件代理到全局进行处理，也就是说监听函数并未绑定到Dom上。 因此阻止react的事件冒泡e.stopPropagation()，就不发阻止原生事件的冒泡，表现为点击Drawer也会收起Drawer；禁用原生事件冒泡e.nativeEvent.stopPropagation()，React的监听函数就调用不到，表现为点击Drawer以外dom，Drawer不会收起。这些都不是我们想要的。

解决方案

正确的姿势应该是判断event.target对象是否是目标对象或包含目标对象或被包含目标对象，以此来决定是否触发事件

 componentDidMount() {
  document.addEventListener('click', this.hideDrawer);
 }

 componentWillUnmount() {
  document.removeEventListener('click', this.hideDrawer);
 }

 hideDrawer = e => {
  const { closeDrawer } = this.props;
  // 找到不需要关闭的dom 一级菜单
  const tabContent = document.querySelectorAll('.ant-menu-submenu-vertical');
  // 找到不需要关闭的dom   Drawer
  const drawerContent = document.querySelector('#menuDrawer');
  // 判断当前点击的dom对象有没有包含在目标dom中
  const isHave = Array.from(tabContent).some(item => item.contains(e.target));
  // 不包含则关闭Drawer 包含就走其他的业务逻辑了
  if (tabContent !== null && !(isHave || drawerContent.contains(e.target))) {
   closeDrawer();
  }
 };

到此这篇关于React冒泡和阻止冒泡的应用详解的文章就介绍到这了,更多相关React冒泡和阻止冒泡内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • React中阻止事件冒泡的问题详析

    前言 最近在研究react.redux等,网上找了很久都没有完整的答案,索性自己整理下,这篇文章就来给大家介绍了关于React阻止事件冒泡的相关内容,下面话不多说了,来一起看看详细的介绍吧 在正式开始前,先来看看 JS 中事件的触发与事件处理器的执行. JS 中事件的监听与处理 事件捕获与冒泡 DOM 事件会先后经历 捕获 与 冒泡 两个阶段.捕获即事件沿着 DOM 树由上往下传递,到达触发事件的元素后,开始由下往上冒泡. IE9 及之前的版本只支持冒泡 |  A  --------------

  • React冒泡和阻止冒泡的应用详解

    阻止事件冒泡分三种: 1:阻止合成事件往最外层document上的事件冒泡,用e.nativeEvent.stopImmediatePropagation(); 2: 合成事件间的冒泡,使用 e.stopPropagation(): 3:阻止合成事件,往处理document上的其他原生事件冒泡,需要通过e.target来判断,示例代码如下. import React,{ Component } from 'react'; import ReactDOM,{findDOMNode} from 'r

  • javascript 中事件冒泡和事件捕获机制的详解

    javascript 中事件冒泡和事件捕获机制的详解 二者作用:描述事件触发时序问题 事件捕获:从document到触发事件的那个节点,即自上而下的去触发事件---由外到内 事件冒泡:自下而上的去触发事件---由内到外 绑定事件方法的第三个参数,就是控制事件触发顺序是否为事件捕获 true,事件捕获:false,事件冒泡 一般默认false,即事件冒泡 Jquery的e.stopPropagation会阻止冒泡,意思就是到DOM为止,祖先级的事件就不要触发了 下面是我尝试的例子: <!DOCTY

  • React之错误边界 Error Boundaries示例详解

    目录 引言 注意 实现 错误边界应该放置在哪? 未捕获错误(Uncaught Errors)该如何处理? 注意:自 React 15 的命名更改 引言 过去,组件内的代码异常会导致 React 的内部状态被破坏,产生可能无法追踪的错误.但 React 并没有提供一种优雅处理这些错误的方式,也无法从错误中恢复. 默认情况下,若一个组件在渲染期间(render)发生错误,会导致整个组件树全部被卸载,这当然不是我们期望的结果. 部分组件的错误不应该导致整个应用崩溃.为了解决这个问题,React 16

  • Electron整合React使用搭建开发环境的步骤详解

    简介 用于构建用户界面的 JavaScript 库 步骤 首先创建React npx create-react-app doc 进入到doc项目 cd doc 安装electron npm install electron --save-dev 安装依赖 判断是否为生产环境 cnpm install electron-is-dev --save-dev 在项目根目录创建main.js const { app ,BrowserWindow } = require('electron') const

  • JavaScript React如何修改默认端口号方法详解

    问题 我们在使用React的时候经常会遇到这种情况,3000端口号被占用.有时候可以关掉3000端口,但更多时候,我们需要打开多个项目的时候,就必须要开启多个端口了.这时候就需要修改默认端口号了. 解决办法 修改默认端口号 具体做法 第一步:找到start.js文件 这个文件的位置在:node_modules文件夹下 -> react-scripts文件夹下 -> scripts文件夹下 -> start.js node_modules下 start.js文件 51行处修改,整个文件端口

  • React三大属性之Refs的使用详解

    refs是React中用来取得某个JSX组件或者某个DOM中的一些状态值的时候,用来获取节点的方法.在React官方的解释中,它的适用范围如下: 管理焦点,文本选择或媒体播放. 触发强制动画. 集成第三方 DOM 库. React文档中再三强调,请不要过度使用refs,所以当我们可以用dom原生对象解决时,尽量不要使用refs 依照之前的写法,首先是给出类组件和函数组件中refs的写法 类组件 在类中,refs有三种方式,目前最常用的是回调的形式使用,分别进行演示 //直接定义refs,已废弃

  • React三大属性之props的使用详解

    上期讲了state,接下来讲讲props.props功能在于组件间通信(父子组件),首先说说在各种组件中的用法: 类组件 //父组件传值 class Father extends React.PureComponent{ render(){ return ( <Son value={"son"} /> ) } } class Son extends React.PureComponent{ render(){ return ( <div>this data is

  • React 三大属性之state的使用详解

    React中很多地方需要用到数据,这在React中被叫做状态,我们需要一个专门管理状态的方法,于是state相关的就诞生了.state应该被要求有两个基本功能,一,能够存储一定的值,从而能被react使用,二,能够再它改变的时候被React监听到并且重新渲染.这里分别介绍一下在类和函数组件中state的写法: 类组件 class ClassComponent extends React.Component{ constructor(props){ super(props) } //可写可不写 r

  • React路由拦截模式及withRouter示例详解

    React路由拦截模式及withRouter示例详解

    目录 一.路由拦截 二.路由模式 三.withRouter 一.路由拦截 在前面两篇 路由博客基础上,我们将ReactRouter.js的我的profile路由设置成路由拦截的: <Route path="/profile" render={() => isAuth() ? <Profile/> : <Redirect to="/login"></Redirect> }></Route> 新建Logi

  • react通过组件拆分实现购物车界面详解

    react通过组件拆分实现购物车界面详解

    目录 页面组件拆分图 功能点 页面组件拆分图 功能点 实现全选反选 数量的增加和减少 选中删除,单独删除 商品总价和商品总数量的变化 首先在根组件中把页面的布局以及功能先实现,然后再拆分组件,最后通过组件传值进行属性和方法的传递 代码展示 app.js组件 import axios from 'axios'; import React, { Component } from 'react'; import './App.css'; import Cartfoot from './Componen

随机推荐