首頁  >  文章  >  web前端  >  react阻止事件冒泡的方法是什麼

react阻止事件冒泡的方法是什麼

WBOY
WBOY原創
2022-04-22 10:34:358741瀏覽

方法:1、利用「e.stopPropagation()」在沒有涉及原生事件註冊只有react事件時使用;2、利用「e.nativeEvent.stopImmediatePropagation()」阻止最外層document上的事件冒泡。

react阻止事件冒泡的方法是什麼

本教學操作環境:Windows10系統、react17.0.1版、Dell G3電腦。

react阻止事件冒泡的方法是什麼

在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中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn