react 阻止事件传递/冒泡


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

  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 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM