Maison > interface Web > js tutoriel > Comment éviter l'échec du bouillonnement en réaction

Comment éviter l'échec du bouillonnement en réaction

coldplay.xixi
Libérer: 2020-11-17 14:08:09
original
2013 Les gens l'ont consulté

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()].

Comment éviter l'échec du bouillonnement en réaction

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;
Copier après la connexion

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 &#39;react&#39;;
import &#39;./App.css&#39;;
class App extends Component {
  componentDidMount() {
    document.addEventListener(&#39;click&#39;, this.handleDocumentClick, false);
  }
  handleDocumentClick = (e) => {
    console.log(&#39;handleDocumentClick: &#39;, e);
  }
  handleClickTestBox = (e) => {
    console.warn(&#39;handleClickTestBox: &#39;, e);
  }
  handleClickTestBox2 = (e) => {
    console.warn(&#39;handleClickTestBox2: &#39;, e);
  }
  handleClickTestBox3 = (e) => {
    // 阻止合成事件的冒泡
    e.stopPropagation();
    // 阻止与原生事件的冒泡
    e.nativeEvent.stopImmediatePropagation();
    console.warn(&#39;handleClickTestBox3: &#39;, e);
  }
  render() {
    return (
      <div
        className="test-box"
        onClick={this.handleClickTestBox}
      >
        <div
          onClick={this.handleClickTestBox2}
        >
          <div
            onClick={this.handleClickTestBox3}
          >
          </div>
        </div>
      </div>
    );
  }
}
export default App;
Copier après la connexion

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 &#39;react&#39;;
import &#39;./App.css&#39;;
class App extends Component {
  componentDidMount() {
    document.addEventListener(&#39;click&#39;, this.handleDocumentClick, false);
    document.body.addEventListener(&#39;click&#39;, this.handleBodyClick, false);
  }
  handleDocumentClick = (e) => {
    console.log(&#39;handleDocumentClick: &#39;, e);
  }
  handleBodyClick = (e) => {
    if (e.target && e.target === document.querySelector(&#39;#inner&#39;)) {
      return;
    }
    console.log(&#39;handleBodyClick: &#39;, e);
  }
  handleClickTestBox = (e) => {
    console.warn(&#39;handleClickTestBox: &#39;, e);
  }
  handleClickTestBox2 = (e) => {
    console.warn(&#39;handleClickTestBox2: &#39;, e);
  }
  handleClickTestBox3 = (e) => {
    // 阻止合成事件的冒泡
    e.stopPropagation();
    // 阻止与原生事件的冒泡
    e.nativeEvent.stopImmediatePropagation();
    console.warn(&#39;handleClickTestBox3: &#39;, 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;
Copier après la connexion

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal