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


Posted in Javascript onAugust 18, 2020

阻止事件冒泡分三种:

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冒泡和阻止冒泡内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木! 

Javascript 相关文章推荐
将函数的实际参数转换成数组的方法
Jan 25 Javascript
Jquery实现无刷新DropDownList联动实现代码
Mar 08 Javascript
aspx中利用js实现确认删除代码
Jul 22 Javascript
jQuery解析XML文件同时动态增加js文件的方法
Jun 01 Javascript
js点击列表文字对应该行显示背景颜色的实现代码
Aug 05 Javascript
js控制元素显示在屏幕固定位置及监听屏幕高度变化的方法
Aug 11 Javascript
Vue.js结合Ueditor富文本编辑器的实例代码
Jul 11 Javascript
jQuery实现简单的回到顶部totop功能示例
Oct 16 jQuery
JavaScript时间戳与时间日期间相互转换
Dec 11 Javascript
JavaScript静态作用域和动态作用域实例详解
Jun 17 Javascript
vue中后端做Excel导出功能返回数据流前端的处理操作
Sep 08 Javascript
Vue切换Tab动态渲染组件的操作
Sep 21 Javascript
JavaScript数组排序的六种常见算法总结
Aug 18 #Javascript
js实现简单扫雷
Nov 27 #Javascript
基于JavaScript实现大文件上传后端代码实例
Aug 18 #Javascript
javascript实现扫雷简易版
Aug 18 #Javascript
详解Vue的组件中data选项为什么必须是函数
Aug 17 #Javascript
Openlayers实现扩散的动态点(水纹效果)
Aug 17 #Javascript
openLayer4实现动态改变标注图标
Aug 17 #Javascript
You might like
javascript 无提示关闭窗口脚本
2009/08/17 Javascript
JavaScript获取页面上某个元素的代码
2011/03/13 Javascript
JS 操作符整理[推荐收藏]
2011/11/15 Javascript
NodeJS学习笔记之Http模块
2015/01/13 NodeJs
TypeScript Type Innference(类型判断)
2016/03/10 Javascript
javascript实现根据函数名称字符串动态执行函数的方法示例
2016/12/28 Javascript
基于vue.js实现侧边菜单栏
2017/03/20 Javascript
微信小程序封装http访问网络库实例代码
2017/05/24 Javascript
Three.js基础学习之场景对象
2017/09/27 Javascript
JavaScript的数据类型转换原则(干货)
2018/03/15 Javascript
JS实现普通轮播图特效
2020/01/01 Javascript
微信小程序连接服务器展示MQTT数据信息的实现
2020/07/14 Javascript
[04:29]2014DOTA2国际邀请赛 主赛事第三日TOPPLAY
2014/07/21 DOTA
[46:21]Liquid vs LGD 2018国际邀请赛淘汰赛BO3 第一场 8.23
2018/08/24 DOTA
Windows上配置Emacs来开发Python及用Python扩展Emacs
2015/11/20 Python
Python3实现购物车功能
2018/04/18 Python
对python的文件内注释 help注释方法
2018/05/23 Python
python实现根据文件格式分类
2019/10/31 Python
pytorch 图像中的数据预处理和批标准化实例
2020/01/15 Python
使用python客户端访问impala的操作方式
2020/03/28 Python
python redis存入字典序列化存储教程
2020/07/16 Python
基督教卡片、励志礼品、家居装饰等:DaySpring
2018/10/12 全球购物
哈萨克斯坦移动和数字技术在线商店:SatelOnline.kz
2020/09/04 全球购物
中专自荐信
2013/10/13 职场文书
违反课堂纪律检讨书
2014/01/19 职场文书
普罗米修斯教学反思
2014/02/06 职场文书
入党积极分子自我鉴定
2014/02/18 职场文书
企业家王石演讲稿:坚持与放下
2014/04/27 职场文书
不服从上级领导安排的检讨书
2014/09/14 职场文书
学校党的群众路线教育实践活动制度建设计划
2014/11/03 职场文书
先进人物事迹材料
2014/12/29 职场文书
环保宣传语大全
2015/07/13 职场文书
毕业欢送会致辞
2015/07/29 职场文书
Mysql效率优化定位较低sql的两种方式
2021/05/26 MySQL
python代码实现备忘录案例讲解
2021/07/26 Python
对讲机知识
2022/04/07 无线电