react阻止冒泡事件

2021-08-01 05:14:33 字數 1843 閱讀 6211

最近在研究react、redux等,網上找了很久都沒有完整的答案,如果對你有用就關注一下,以後都會有乾貨分享的,謝謝。

首先,要知道再react中的合成事件和原生事件之間的區別

1、合成事件

在jsx中直接繫結的事件,如

ref="aaa"

onclick=>更新a>

這裡的handleclick事件就是合成事件

2、原生事件

通過js原生**繫結的事件,如

document.body.addeventlistener('click',e=>

console.log('body');})或

this.refs.update.addeventlistener('click',e=>);

3、阻止冒泡事件分三種情況

a、阻止合成事件間的冒泡,用e.stoppropagation();

import react, from

'react';

import reactdom, from

'react-dom';

class

counter

extends

component

}handleclick(e));

}testclick()

render()>

p>

ref="update"

onclick=>更新a>

div>)}

}var div1 = document.getelementbyid('content');

reactdom.render(

,div1,()=>{});

b、阻止原生事件與最外層document上的事件間的冒泡,用

e.nativeevent.stopimmediatepropagation();

import react, from

'react';

import reactdom, from

'react-dom';

class

counter

extends

component

}handleclick(e));

}render()p>

ref="update"

onclick=>更新a>

div>)}

componentdidmount() );

}}var div1 = document.getelementbyid('content');

reactdom.render(

,div1,()=>{});

c、阻止合成事件與除最外層document上的原生事件上的冒泡,通過判斷e.target來避免

import react, from

'react';

import reactdom, from

'react-dom';

class

counter

extends

component

}handleclick(e));

}render()p>

ref="update"

onclick=>更新a>

div>)}

componentdidmount()

console.log('body');})}

}var div1 = document.getelementbyid('content');

reactdom.render(

,div1,()=>{});

React阻止事件冒泡

react 如何阻止事件冒泡?答案採納者 notebin 主頁 react 為提高效能,有自己的一套事件處理機制,相當於將事件 到全域性進行處理,也就是說監聽函式並未繫結到dom元素上。因此,如果你禁止react事件冒泡e.stoppropagation 你就無法阻止原生事件冒泡 你禁用原生事件冒泡...

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...