个人中心
gpt4 book ai didi

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

转载 作者：qq735679552 更新时间：2022-09-29 22:32:09 25 4
gpt4 key购买 nike

CFSDN坚持开源创造价值，我们致力于搭建一个资源共享平台，让每一个IT人在这里找到属于你的精彩世界.

这篇CFSDN的博客文章React冒泡和阻止冒泡的应用详解由作者收集整理，如果你对这篇文章有兴趣，记得点赞哟.

阻止事件冒泡分三种:

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

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

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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
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对象是否是目标对象或包含目标对象或被包含目标对象，以此来决定是否触发事件 。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
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冒泡和阻止冒泡内容请搜索我以前的文章或继续浏览下面的相关文章希望大家以后多多支持我！  。

原文链接：https://juejin.im/post/6861785863698055175 。

最后此篇关于React冒泡和阻止冒泡的应用详解的文章就讲到这里了,如果你想了解更多关于React冒泡和阻止冒泡的应用详解的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！ 。

25 4 0
文章推荐： 类静态初始化块即将纳入ES2022，我们先一睹为快
文章推荐： 详解用Python练习画个美队盾牌
文章推荐： 谈一谈系统架构的性能优化思路
文章推荐： 详解python中TCP协议中的粘包问题
qq735679552
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com