詭異！React stopPropagation失靈

來自專欄 React這件小事5 人贊了文章

前言

故事的開頭是這樣的：寫業務的過程中，發現在React的onClick的回調函數里，用stopPropagation阻止綁定在document上的事件的時候，是沒辦法做到的，只可以阻止outClick事件的觸發。詳情如下：

class ExampleApplication extends React.Component { componentDidMount() { document.addEventListener(click, () => { alert(document click); }) } outClick(e) alert(outClick); } onClick(e) { alert(onClick); e.stopPropagation(); } render() { return <div onClick={this.outClick}> <button onClick={this.onClick}> 測試click事件 </button> </div> }}

這個例子最終會輸出：

onClick, documentClick

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

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

其實我們仔細想想：React在首次渲染的時候，就會執行事件的綁定，如果是由於綁定快慢的問題導致的話，應該先輸出documentClick, 在輸出onClick，所以由上面例子的輸出可知，並不是因為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。原理是這樣的：

對於例子一里，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事件機制，歡迎繼續收看。

圖片來源：謝謝大家捧場！

推薦閱讀：