javascript - react 中綁定事件和阻止事件冒泡

Question

直接上程式碼吧，我想了半天不知道哪裡出問題了。

    state = {
        spread: false
    }

    componentDidMount() {
        console.log('document clicked')
        document.onclick = () => {
            if(this.state.spread) {
                this.setState({
                    spread: false
                })
            }
        }
    }

    spreadHandler (e) {
        console.log('target clicked')
        // 这个事件绑定在一个 a 标签上
        e.stopPropagation()
        this.setState({
            spread: !this.state.spread
        })
    }

這個功能就是一個類似淘寶頂部導航條的功能，只不過我這裡用的是點擊事件。現在我觸發spreadHandler的時候取消了冒泡，但是document的click事件還是會觸發。不知道是因為事件綁定在 a 標籤上，還是別的原因造成的，有人知道這是怎麼回事嗎？

Answer 1

react 的合成事件中的阻止冒泡, 是無法取消原生事件冒泡的.
原生事件中阻止冒泡行為, 反而可以阻止react 合成事件中的冒泡.
所以應該盡量避免混用, 非用不可的話, 可以在document 的事件處理程序中加一層判斷.

document.addEventListener('click', function(e){
    // 类似事件委托, 判断一下发生事件的元素.
    if( e.target.nodeName.toLowerCase() === 'a' ) {
        return;
    }
}, false);

Answer 2

e.preventDeafult()

Answer 3

試試這個：

e.nativeEvent.stopImmediatePropagation();

react的事件機制與原生js的事件機制是有所區別的。

Answer 4

react的合成事件都是透過綁定在document上click的事件代理實現的，所以無法透過阻止合成事件冒泡(已將冒到document上了）來阻止docuemnt上的其他事件處理，所以得用原生事件