react中阻止事件冒泡

直接看栗子：

頁面上3個div，如圖所示

1、在沒有涉及到原生事件註冊只有react事件時，用e.stoppropagation()阻止冒泡，**如下：

import react,

from
'react'
;import
;class
extends
component
handleclicktestbox2
=(e)
=>
handleclicktestbox3
=(e)
=>
render()
>
onclick=
>
onclick=
>
<
/div>
<
/div>
<
/div>);
}}export控制台列印：
成功阻止事件的冒泡
2、當用document.addeventlistener註冊了原生的事件後，用e.stoppropagation()是不能阻止與document之間的冒泡，這時候需要用到e.nativeevent.stopimmediatepropagation()方法，**如下：
3、阻止合成事件與非合成事件（除了document）之間的冒泡，以上兩種方式都不適用，需要用到e.target 判斷， **如下：
import react,
from
'react'
;import
;class
extends
component
handledocumentclick
=(e)
=>
handlebodyclick
=(e)
=>
console.
log(
'handlebodyclick: '
, e);}
handleclicktestbox
=(e)
=>
handleclicktestbox2
=(e)
=>
handleclicktestbox3
=(e)
=>
render()
>
onclick=
>
id="inner"
onclick=
>
<
/div>
<
/div>
<
/div>);
}}export控制台列印：
react阻止冒泡事件
最近在研究react redux等，網上找了很久都沒有完整的答案，如果對你有用就關注一下，以後都會有乾貨分享的，謝謝。首先，要知道再react中的合成事件和原生事件之間的區別 1 合成事件 在jsx中直接繫結的事件，如 ref aaa onclick 更新a 這裡的handleclick事件就是合成...
React阻止事件冒泡
react 如何阻止事件冒泡？答案採納者 notebin 主頁 react 為提高效能，有自己的一套事件處理機制，相當於將事件 到全域性進行處理，也就是說監聽函式並未繫結到dom元素上。因此，如果你禁止react事件冒泡e.stoppropagation 你就無法阻止原生事件冒泡 你禁用原生事件冒泡...
阻止事件冒泡
事件冒泡的概念在此不再重複，下面主要介紹防止事件冒泡的方法 符合w3c標準的event.stoppropagation 和ie瀏覽器下的window.event.cancelbubble true 上述 注釋中標註了阻止事件冒泡的方法，下面是針對兩種方法的封裝 function stopbubble...