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

  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

版权声明：本文为kybs0原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/kybs0/p/13389584.html