React阻止事件冒泡

2021-08-29 04:44:08 字數 637 閱讀 9581

react 如何阻止事件冒泡?(

答案採納者(notebin)主頁(

react 為提高效能,有自己的一套事件處理機制,相當於將事件**到全域性進行處理,也就是說監聽函式並未繫結到dom元素上。

因此,如果你禁止react事件冒泡e.stoppropagation(),你就無法阻止原生事件冒泡;

你禁用原生事件冒泡e.nativeevent.stoppropagation(),react的監聽函式就呼叫不到了。

正確的姿勢,應該是判斷event.target物件,是否是目標物件、或包含的物件、或被包含的物件,來決定是否觸發事件。

以下函式就可以用來判斷包含性:

function

contains

(root, n)

node = node.parentnode;

}return

false

;}

demo:

handleclick

(e)if

(contains

(this

.root, e.target)

)}

react阻止冒泡事件

最近在研究react redux等,網上找了很久都沒有完整的答案,如果對你有用就關注一下,以後都會有乾貨分享的,謝謝。首先,要知道再react中的合成事件和原生事件之間的區別 1 合成事件 在jsx中直接繫結的事件,如 ref aaa onclick 更新a 這裡的handleclick事件就是合成...

react中阻止事件冒泡

直接看栗子 頁面上3個div,如圖所示 1 在沒有涉及到原生事件註冊只有react事件時,用e.stoppropagation 阻止冒泡,如下 import react,from react import class extends component handleclicktestbox2 e h...

阻止事件冒泡

事件冒泡的概念在此不再重複,下面主要介紹防止事件冒泡的方法 符合w3c標準的event.stoppropagation 和ie瀏覽器下的window.event.cancelbubble true 上述 注釋中標註了阻止事件冒泡的方法,下面是針對兩種方法的封裝 function stopbubble...