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 相关文章推荐
增强的 JavaScript 的 trim 函数的代码
Aug 13 Javascript
jquery实现的图片点击滚动效果
Apr 29 Javascript
node.js中的fs.writeFile方法使用说明
Dec 14 Javascript
微信JS接口汇总及使用详解
Jan 09 Javascript
jquery实现对联广告的方法
Feb 05 Javascript
JavaScript使用push方法添加一个元素到数组末尾用法实例
Apr 06 Javascript
jquery实现带缩略图的可定制高度画廊效果(5种)
Aug 28 Javascript
JavaScript如何调试有哪些建议和技巧附五款有用的调试工具
Oct 28 Javascript
详解如何实现一个简单的 vuex
Feb 10 Javascript
讲解vue-router之命名路由和命名视图
May 28 Javascript
Vue+element 解决浏览器自动填充记住的账号密码问题
Jun 11 Javascript
详解微信小程序轨迹回放实现及遇到的坑
Feb 02 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
在IIS上安装PHP4.0正式版
2006/10/09 PHP
PHP新手上路(三)
2006/10/09 PHP
ThinkPHP后台首页index使用frameset时的注意事项分析
2014/08/22 PHP
PHP实现的下载远程图片自定义函数分享
2015/01/28 PHP
PHP查找数值数组中不重复最大和最小的10个数的方法
2015/04/20 PHP
php判断某个方法是否存在函数function_exists (),method_exists()与is_callable()区别与用法解析
2020/04/20 PHP
Yii 框架使用Forms操作详解
2020/05/18 PHP
有一段有意思的代码-javascript现实多行信息
2007/08/26 Javascript
Java 正则表达式学习总结和一些小例子
2012/09/13 Javascript
热点新闻滚动特效的js代码
2013/08/17 Javascript
js获取滚动距离的方法
2015/05/30 Javascript
jQuery中hover与mouseover和mouseout的区别分析
2015/12/24 Javascript
JavaScript正则表达式实例详解
2016/10/16 Javascript
jQuery+HTML5实现弹出创意搜索框层
2016/12/29 Javascript
Android中Okhttp3实现上传多张图片同时传递参数
2017/02/18 Javascript
bootstrap常用组件之头部导航实现代码
2017/04/20 Javascript
JavaScript 性能提升之路(推荐)
2019/04/10 Javascript
tornado框架blog模块分析与使用
2013/11/21 Python
Python中的字符串替换操作示例
2016/06/27 Python
Python实现合并同一个文件夹下所有PDF文件的方法示例
2018/04/28 Python
Python3.5 Json与pickle实现数据序列化与反序列化操作示例
2019/04/29 Python
python网络编程 使用UDP、TCP协议收发信息详解
2019/08/29 Python
tensorflow如何批量读取图片
2019/08/29 Python
Spy++的使用方法及下载教程
2021/01/29 Python
解析HTML5中的新功能本地存储localStorage
2016/03/01 HTML / CSS
DKNY品牌官网:纽约大都会时尚风格
2016/10/20 全球购物
超市采购员岗位职责
2014/02/01 职场文书
2014年党员评议表自我评价
2014/09/27 职场文书
个人批评与自我批评发言稿
2014/09/28 职场文书
买卖合同协议书范本
2014/10/18 职场文书
群众路线自我剖析范文
2014/11/04 职场文书
2015年全国科普日活动总结
2015/03/23 职场文书
工作简报格式范文
2015/07/21 职场文书
工作违纪的检讨书范文
2019/07/09 职场文书
CSS 制作波浪效果的思路
2021/05/18 HTML / CSS
一文读懂navicat for mysql基础知识
2021/05/31 MySQL