Méthodes de réaction pour éviter l'échec du bouillonnement : 1. Lorsqu'il n'y a pas d'enregistrement d'événement natif et que seuls les événements de réaction sont impliqués, utilisez [e.stopPropagation()] pour empêcher le bouillonnement ; .nativeEvent.stopImmediatePropagation()].
Méthode React pour éviter les échecs de bouillonnement :
1. Seuls les événements de réaction sont enregistrés lorsqu'il n'y a pas d'événement natif. impliqué. Lors de l'utilisation de e.stopPropagation()
pour empêcher le bouillonnement, le code est le suivant :
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. Lorsque vous utilisez document.addEventListener
pour enregistrer des événements natifs, l'utilisation de e.stopPropagation() ne peut pas empêcher le bouillonnement avec le document, alors vous devez utiliser la méthode e.nativeEvent.stopImmediatePropagation()
, le code est le suivant :
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. Empêcher les bulles entre les événements synthétiques et les événements non synthétiques (sauf document Les deux méthodes ci-dessus ne sont pas applicables, vous avez besoin). à utiliser Allez sur e.target
pour juger, le code est le suivant :
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;
Recommandations d'apprentissage gratuites associées : JavaScript (vidéo)
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!