阻止事件冒泡分三种：
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();
}
};
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
这一波大模型产业落地浪潮里，不少企业其实处在 “干瞪眼“的状态。
一种情况是，很多大模型产品看得见却摸不着，在台上一个个遥遥领先——今天Sora技精四座，明天英伟达的机器人又赢得满堂彩，可是到了台下一问：啥时候能用上啊？答曰：遥遥无期。
另一种情况是，企业想用上大模型，却又难免瞻前顾后——既要考虑场景融合，又得兼顾安全性，还要考虑打通现有系统，再加上各种部署成本和繁琐的采购流程……最后只能拂袖：罢了，再等等吧。
稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！
昨天有一位朋友在大神群里分享，自己亚服账号被封号之后居然弹出了国服的封号信息对话框。
这里面让他访问的是一个国服的战网网址，com.cn和后面的zh都非常明白地表明这就是国服战网。
而他在复制这个网址并且进行登录之后，确实是网易的网址，也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情，因为以前都没有出现这样的情况，现在突然提示跳转到国服战网的网址，是不是说明了简体中文客户端已经开始进行更新了呢？