react 阻止事件傳遞/冒泡

當我們設計界面時，在以下情況會需要阻止元素/組件內的事件阻斷，不被上層觸發：

1. 彈出提示框，期望點擊框外空白區域可以關閉彈框、點擊框內不關閉彈框
2. 組件設計時，期望點擊全局/點擊指定元素時，顯示不一樣的交互。

網上搜到三種答案：

ev.preventDefault() ev.stopPropagation(); ev.nativeEvent.stopImmediatePropagation();

推薦第三個：

    componentDidMount() {
        document.onclick = e => this.onClickDocument();
    }
    onClickDocument(){
        alert('onClickDocument');
    }
    onClickElement(e){
        e.nativeEvent.stopImmediatePropagation();
        alert('onClickElement');
    }

 

參考：

https://stackoverflow.com/questions/24415631/reactjs-syntheticevent-stoppropagation-only-works-with-react-events

https://developer.mozilla.org/zh-CN/docs/Web/API/Event/stopImmediatePropagation