react 阻止事件传递/冒泡

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

弹出提示框，期望点击框外空白区域可以关闭弹框、点击框内不关闭弹框

组件设计时，期望点击全局/点击指定元素时，显示不一样的交互。

网上搜到三种答案：

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 }