0
点赞
收藏
分享

微信扫一扫

react 阻止事件传递/冒泡

当我们设计界面时,在以下情况会需要阻止元素/组件内的事件阻断,不被上层触发:

  1. 弹出提示框,期望点击框外空白区域可以关闭弹框、点击框内不关闭弹框
  2. 组件设计时,期望点击全局/点击指定元素时,显示不一样的交互。

网上搜到三种答案:

ev.preventDefault().stopPropagation();.nativeEvent.stopImmediatePropagation();

推荐第三个:

1     componentDidMount() {
2 document.onclick = e => this.onClickDocument();
3 }
4 onClickDocument(){
5 alert('onClickDocument');
6 }
7 onClickElement(e){
8 e.nativeEvent.stopImmediatePropagation();
9 alert('onClickElement');
10

 

参考:​

​​https​​​​://stackoverflow.com/questions/24415631/reactjs-syntheticevent-stoppropagation-only-works-with-react-events​​

​​https://developer.mozilla.org/zh-CN/docs/Web/API/Event/stopImmediatePropagation​​ 

作者:​​唐宋元明清2188​​



举报

相关推荐

0 条评论