当我们设计界面时,在以下情况会需要阻止元素/组件内的事件阻断,不被上层触发:
- 弹出提示框,期望点击框外空白区域可以关闭弹框、点击框内不关闭弹框
- 组件设计时,期望点击全局/点击指定元素时,显示不一样的交互。
网上搜到三种答案:
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