詭異！React stopPropagation失靈

幽_月發表於2018-02-23
React

前言

先來看這
故事的開頭是這樣的：寫程式碼的過程中，發現在內層用stopPropagation阻止繫結在document上的事件的時候，是沒辦法做到的，只可以阻止outClick事件的觸發。

class ExampleApplication extends React.Component {
    componentDidMount() {
        document.addEventListener(`click`, () => {
            alert(`document click`);
        })
    }

    outClick(e) {
        console.log(e.currentTarget);
        alert(`outClick`);
    }
    
    onClick(e) {
        console.log(e.currentTarget);
        alert(`onClick`);
        e.stopPropagation();
    }
    render() {
        return <div onClick={this.outClick}>
            <button onClick={this.onClick}> 測試click事件 </button>
        </div>
    }
}

關於這個問題的解釋，網上五花八門，有些將其歸結為是由於事件委託的原因，例如這篇文章裡說

我們直接在jsx模板上繫結的事件，都是委託在了document上，那自然要比直接在dom上繫結的事件慢了，等document收到事件後才去e.stopPropagation()，太晚了

其實從上面例子的輸出： 由`onClick`,再到`document click`可知，其實原生document上繫結的事件時最後執行的，所以並不是因為document收到事件快慢的原因而導致這個問題。

真相

真相只有一個，那就是：
出現上述bug的主要原因是混用瀏覽器原生事件跟React合成事件

詳細解釋：React有自己的一套事件處理機制，它會將所有的事件都繫結在document上，然後再用dispatchEvent統一分發，這時候分發的是合成事件。
而onClick(e)這時候拿到的e其實是合成事件，只能阻止合成事件的冒泡。

舉個例子來驗證一下


class ExampleApplication extends React.Component {
    componentDidMount() {
        document.addEventListener(`click`, () => {
            alert(`document click`);
        })
        document.getElementById(`div1`).addEventListener(`click`, () => {
            alert(`原生outClick`);
        })
    }

    outClick(e) {
        console.log(e.currentTarget);
        alert(`合成outClick`);
    }
    
    onClick(e) {
        console.log(e.currentTarget);
        alert(`onClick`);
        e.stopPropagation();
    }
    render() {
        return <div id="div1" onClick={this.outClick}>
            <button onClick={this.onClick}> 測試click事件 </button>
        </div>
    }
}

做了點小改動，就是外層的div繫結的函式用原生的方式跟jsx的方式都繫結一次，所以最終的輸出為

`原生outClick`, `onClick`,`document click`

所以button回撥函式裡的stopPropagation只能阻止合成事件的冒泡，而對於原生繫結的，則不行。

解決方法

解決方法有幾種，我個人認為最簡單的就是直接在onClick裡利用[event.stopImmediatePropagation()][2]。原理是這樣的：

對於例子一里，document其實繫結了兩個事件：

// react 合成事件, dispatchEvent裡面執行回撥函式
document.addEventListener(`click`， dispatchEvent);

// 瀏覽器原生
document.addEventListener(`click`, () => {
   alert(`document click`);
})

而dispatchEvent裡的stopImmediatePropagation可以使得繫結在document上的其他事件就不會被觸發

    onClick(e) {
        console.log(e.currentTarget);
        alert(`onClick`);
        e.nativeEvent.stopImmediatePropagation();
    }

當然本篇文章只是為了拋磚引玉，重點是下一篇的react事件機制，歡迎繼續收看。

相關文章