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 相关文章推荐
JS提交并解析后台返回的XML的代码
Nov 03 Javascript
将函数的实际参数转换成数组的方法
Jan 25 Javascript
js获取图片大小的函数代码
Sep 20 Javascript
比较新旧两个数组值得增加和删除的JS代码
Oct 30 Javascript
jQuery实现表格展开与折叠的方法
May 04 Javascript
JavaScript编写Chrome扩展实现与浏览器的交互及时间通知
May 16 Javascript
省市联动效果的简单实现代码(推荐)
Jun 06 Javascript
基于jQuery下拉选择框插件支持单选多选功能代码
Jun 07 Javascript
AngularJS改变元素显示状态
Apr 20 Javascript
JavaScript 保护变量不被随意修改的实现代码
Sep 27 Javascript
vue中遇到的坑之变化检测问题(数组相关)
Oct 13 Javascript
JS数组去重详情
Nov 07 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
关于mysql 字段的那个点为是定界符
2007/01/15 PHP
php 操作符与控制结构
2012/03/07 PHP
体育彩票排列三组选三算法分享
2014/03/07 PHP
Zend Framework基本页面布局分析
2016/03/19 PHP
php mysql获取表字段名称和字段信息的三种方法
2016/11/13 PHP
PHP 访问数据库配置通用方法(json)
2018/05/20 PHP
Yii框架where查询用法实例分析
2019/10/22 PHP
PHPStorm2020.1永久激活及下载更新至2020(推荐)
2020/09/25 PHP
用Javascript实现Windows任务管理器的代码
2012/03/27 Javascript
JavaScript中变量声明有var和没var的区别示例介绍
2014/09/15 Javascript
jQuery实现灰蓝风格标准二级下拉菜单效果代码
2015/08/31 Javascript
基于JS实现简单的样式切换效果代码
2015/09/04 Javascript
Node.js编写组件的三种实现方式
2016/02/25 Javascript
对象转换为原始值的实现方法
2016/06/06 Javascript
BootStrap实现轮播图效果(收藏)
2016/12/30 Javascript
jQuery图片拖动组件Dropzone用法示例
2017/01/17 Javascript
详解javascript函数写法大全
2019/03/25 Javascript
node中使用log4js4.x版本记录日志的方法
2019/08/20 Javascript
Vue+iview+webpack ie浏览器兼容简单处理
2019/09/20 Javascript
理解Proxy及使用Proxy实现vue数据双向绑定操作
2020/07/18 Javascript
详细解析Python中的变量的数据类型
2015/05/13 Python
Python工程师面试题 与Python基础语法相关
2016/01/14 Python
Python正则表达式实现截取成对括号的方法
2017/01/06 Python
美国鲍勃商店:Bob’s Stores
2018/07/22 全球购物
ASOS比利时:英国线上零售商及自有品牌
2018/07/29 全球购物
澳大利亚顶级美发和美容贸易超市:glamaCo
2020/01/19 全球购物
美国一家著名的手表在线折扣网站:Discount Watch Store
2020/02/24 全球购物
计算机应用职专应届生求职信
2013/11/12 职场文书
运动会四百米广播稿
2014/01/19 职场文书
大学生入党推荐书范文
2014/05/17 职场文书
经贸日语专业自荐信
2014/09/02 职场文书
公司2014年度工作总结
2014/12/10 职场文书
2015年学习部工作总结范文
2015/03/31 职场文书
大学生心理健康活动总结
2015/05/08 职场文书
2016教师读书思廉心得体会
2016/01/23 职场文书
Python打包为exe详细教程
2021/05/18 Python