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 相关文章推荐
jQuery Validation实例代码 让验证变得如此容易
Oct 18 Javascript
JavaSript中变量的作用域闭包的深入理解
May 12 Javascript
Bootstrap进度条组件知识详解
May 01 Javascript
JavaScript仿淘宝页面图片滚动加载及刷新回顶部的方法解析
May 24 Javascript
Bootstrap框架结合jQuery仿百度换肤功能实例解析
Sep 17 Javascript
原生JS实现网络彩票投注效果
Sep 25 Javascript
ajax+node+request爬取网络图片的实例(宅男福利)
Aug 28 Javascript
JavaScript对象的浅拷贝与深拷贝实例分析
Jul 25 Javascript
解决Js先触发失去焦点事件再执行点击事件的问题
Aug 30 Javascript
ES6 新增的创建数组的方法(小结)
Aug 01 Javascript
使用p5.js实现动态GIF图片临摹重现
Oct 23 Javascript
在vue中给后台接口传的值为数组的格式代码
Nov 12 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
win2003服务器使用WPS的COM组件的一些问题解决方法
2012/01/11 PHP
关于PHP文件的自动运行方法分析
2016/05/13 PHP
js中几种去掉字串左右空格的方法
2006/12/25 Javascript
newxtree.js代码
2007/03/13 Javascript
javascript 框架小结 个人工作经验
2009/06/13 Javascript
浏览器脚本兼容 文本框中,回车键触发事件的兼容
2010/06/21 Javascript
利用谷歌地图API获取点与点的距离的js代码
2012/10/11 Javascript
深入理解javascript中的立即执行函数(function(){…})()
2014/06/12 Javascript
JS+CSS实现Li列表隔行换色效果的方法
2015/02/16 Javascript
jQuery实现div随意拖动的实例代码(通用代码)
2016/01/28 Javascript
WEB前端实现裁剪上传图片功能
2016/10/17 Javascript
Angularjs Promise实例详解
2018/03/15 Javascript
Vue使用vux-ui自定义表单验证遇到的问题及解决方法
2018/05/10 Javascript
layer.confirm取消按钮绑定事件的方法
2018/08/17 Javascript
javascript实现移动端触屏拖拽功能
2020/07/29 Javascript
写了个监控nginx进程的Python脚本
2012/05/10 Python
在Python中使用列表生成式的教程
2015/04/27 Python
Python的Flask框架应用调用Redis队列数据的方法
2016/06/06 Python
Python 使用 PyMysql、DBUtils 创建连接池提升性能
2019/08/14 Python
Pytest参数化parametrize使用代码实例
2020/02/22 Python
Python钉钉报警及Zabbix集成钉钉报警的示例代码
2020/08/17 Python
HTML5的自定义属性data-*详细介绍和JS操作实例
2014/04/10 HTML / CSS
html5生成柱状图(条形图)效果的实例代码
2016/03/25 HTML / CSS
高档奢华时装在线目的地:FORWARD by elyse walker
2017/10/16 全球购物
Nisbets爱尔兰:英国最大的厨房和餐饮设备供应商
2019/01/26 全球购物
英语专业推荐信
2013/11/16 职场文书
参观监狱心得体会
2014/01/02 职场文书
服务员岗位责任制
2014/02/11 职场文书
领导干部查摆“四风”问题自我剖析材料思想汇报
2014/10/05 职场文书
大学毕业生个人总结
2015/02/28 职场文书
2015年药房工作总结
2015/04/25 职场文书
《丑小鸭》教学反思
2016/02/19 职场文书
浅谈Redis主从复制以及主从复制原理
2021/05/29 Redis
Django Paginator分页器的使用示例
2021/06/23 Python
Win11应用商店打开闪退怎么解决? win11应用商店打不开的多种解决办法
2022/04/05 数码科技
画错魏国疆域啦!《派对咖孔明》动画因作画失误于官网致歉
2022/04/07 日漫