2048
登录
没  有  难  学  的  前  端
登 录
×
<返回上一级

react 阻止事件传递/冒泡

web前端作者:萧飞

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

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

网上搜到三种答案:

ev.preventDefault()
ev.stopPropagation();
ev.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 

本文来源于网络:查看 >
« 上一篇:Antd DatePicker 语言项-显示中文月份
» 下一篇:taro-ui Calendar 修改星期开始时间为星期一(中国格式)
评论
点击刷新
评论
相关博文
×添加代码片段