方法:1、利用「e.stopPropagation()」在沒有涉及原生事件註冊只有react事件時使用;2、利用「e.nativeEvent.stopImmediatePropagation()」阻止最外層document上的事件冒泡。
本教學操作環境:Windows10系統、react17.0.1版、Dell G3電腦。
在react中,阻止事件冒泡有兩種形式:
#1、e.stopPropagation()
在沒有涉及原生事件註冊只有react事件時使用。
2、e.nativeEvent.stopImmediatePropagation()
用document.addEventListener註冊了原生的事件後使用。
React阻止冒泡事件的方法,主要分為以下兩種情況:
1、阻止合成事件間的冒泡,方法:e.stopPropagation( );
事件綁定如下:
#阻止事件冒泡的寫法如下:
2、阻止合成事件與最外層document上的事件間的冒泡,方法:e.nativeEvent.stopImmediatePropagation ();
事件綁定寫法:
(1)不傳參數:
(2)傳參數:
#阻止事件冒泡的寫法:
這樣寫的原因,是給document加入了點擊事件,如下圖:
#推薦學習:《react影片教學》
以上是react阻止事件冒泡的方法是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章!