버블링 실패를 방지하기 위한 반응 방법: 1. 기본 이벤트 등록이 없고 반응 이벤트만 관련된 경우 [e.stopPropagation()]을 사용하여 버블링을 방지합니다. 2. [e.nativeEvent.stopImmediatePropagation을 사용해야 합니다. ()] 방법.
버블링 실패 방지를 위한 반응 방법:
1 기본 이벤트 등록이 없고 반응 이벤트만 포함된 경우 버블링을 방지하려면 e.stopPropagation()
을 사용하세요. , 코드는 다음과 같습니다. e.stopPropagation()
阻止冒泡,代码如下:
import React, { Component } from 'react'; import './App.css'; class App extends Component { handleClickTestBox = (e) => { console.warn('handleClickTestBox: ', e); } handleClickTestBox2 = (e) => { console.warn('handleClickTestBox2: ', e); } handleClickTestBox3 = (e) => { e.stopPropagation(); console.warn('handleClickTestBox3: ', e); } render() { return ( <div className="test-box" onClick={this.handleClickTestBox} > <div onClick={this.handleClickTestBox2} > <div onClick={this.handleClickTestBox3} > </div> </div> </div> ); } } export default App;
2、当用document.addEventListener
注册了原生的事件后,用e.stopPropagation()是不能阻止与document之间的冒泡,这时候需要用到e.nativeEvent.stopImmediatePropagation()
方法,代码如下:
import React, { Component } from 'react'; import './App.css'; class App extends Component { componentDidMount() { document.addEventListener('click', this.handleDocumentClick, false); } handleDocumentClick = (e) => { console.log('handleDocumentClick: ', e); } handleClickTestBox = (e) => { console.warn('handleClickTestBox: ', e); } handleClickTestBox2 = (e) => { console.warn('handleClickTestBox2: ', e); } handleClickTestBox3 = (e) => { // 阻止合成事件的冒泡 e.stopPropagation(); // 阻止与原生事件的冒泡 e.nativeEvent.stopImmediatePropagation(); console.warn('handleClickTestBox3: ', e); } render() { return ( <div className="test-box" onClick={this.handleClickTestBox} > <div onClick={this.handleClickTestBox2} > <div onClick={this.handleClickTestBox3} > </div> </div> </div> ); } } export default App;
3、阻止合成事件与非合成事件(除了document)之间的冒泡,以上两种方式都不适用,需要用到e.target
import React, { Component } from 'react'; import './App.css'; class App extends Component { componentDidMount() { document.addEventListener('click', this.handleDocumentClick, false); document.body.addEventListener('click', this.handleBodyClick, false); } handleDocumentClick = (e) => { console.log('handleDocumentClick: ', e); } handleBodyClick = (e) => { if (e.target && e.target === document.querySelector('#inner')) { return; } console.log('handleBodyClick: ', e); } handleClickTestBox = (e) => { console.warn('handleClickTestBox: ', e); } handleClickTestBox2 = (e) => { console.warn('handleClickTestBox2: ', e); } handleClickTestBox3 = (e) => { // 阻止合成事件的冒泡 e.stopPropagation(); // 阻止与原生事件的冒泡 e.nativeEvent.stopImmediatePropagation(); console.warn('handleClickTestBox3: ', e); } render() { return ( <div className="test-box" onClick={this.handleClickTestBox} > <div onClick={this.handleClickTestBox2} > <div id="inner" onClick={this.handleClickTestBox3} > </div> </div> </div> ); } } export default App;
document.addEventListener
를 사용하여 기본 이벤트를 등록할 때 e.stopPropagation()을 사용하면 문서 버블링을 방지할 수 없습니다. NativeEvent.stopImmediatePropagation() 메서드의 코드는 다음과 같습니다. rrreeeJavaScript🎜(동영상) 🎜🎜3. 합성 이벤트와 비합성 이벤트 간의 버블링을 방지합니다(문서 제외). code>e.target 판단, 코드는 다음과 같습니다: rrreee
관련 무료 학습 추천:
위 내용은 반응 시 버블링 실패를 방지하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!