So verhindern Sie Event-Bubbling in JavaScript

So verhindern Sie Event-Bubbling in JavaScript

Wir müssen darauf achten, dass die Eigenschaften des Event Bubblings sowohl Nachteile als auch Vorteile mit sich bringen. Ich werde dies in nachfolgenden Blogs ausführlich erläutern.

  • Hier besprechen wir, wie sich das Aufsteigen von Ereignissen verhindern lässt.
  • Beispielsweise gibt es jetzt ein untergeordnetes Feld und ein übergeordnetes Feld. Sowohl das untergeordnete Feld als auch das übergeordnete Feld haben Klickereignisse, aber wenn wir jetzt auf das untergeordnete Feld klicken, möchten wir nur, dass das untergeordnete Feld das Klickereignis anzeigt. Hier müssen wir die Methode zum Verhindern von Ereignisblasen verwenden, um die Ereignisanzeige der übergeordneten Box zu isolieren.

Erstellen Sie zunächst zwei Felder und fügen Sie ihnen Klickereignisse hinzu, wie unten gezeigt:

<!DOCTYPE html>
<html lang="de">
<Kopf>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-kompatibel" content="IE=edge">
    <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
    <title>Dokument</title>
    <Stil>
        .Vater{
            Rand: 100px automatisch;
            Breite: 100px;
            Höhe: 100px;
            Überlauf: versteckt;
            Hintergrundfarbe: blassgrün;
        }
        .Sohn{
            Breite: 50px;
            Höhe: 50px;
            Rand links: 25px;
            Rand oben: 25px;
            Hintergrundfarbe: blasses Türkis;
        }
    </Stil>
</Kopf>
<Text>
    <div Klasse="Vater">
        <div Klasse="Sohn"></div>
    </div>
    <Skript>
        var Vater = document.querySelector('.vater');
        var son = document.querySelector('.son');
       son.addEventListener('klicken',Funktion(){
            Alarm ('Sohn');
        },FALSCH)
        Vater.addEventListener('klicken',Funktion(){
            Alarm ('Vater');
        },FALSCH)
    </Skript>
</body>
</html>

Wenn wir auf das Klickereignis der untergeordneten Box klicken, lautet das Druckergebnis:

Wie sollen wir das Klickereignis der übergeordneten Box blockieren?

Sie können stopPropagation() direkt zum Klickereignis innerhalb der Unterbox hinzufügen.

Wie unten dargestellt:

son.addEventListener('klicken',Funktion(e){
            Alarm ('Sohn');
            e.stopPropagation();
        },FALSCH)

An diesem Punkt ist das laufende Ergebnis:

Blockierung erfolgreich.

Es ist jedoch zu beachten, dass diese Methode auch Kompatibilitätsprobleme aufweist. In Browsern mit niedrigeren Versionen (IE 6-8) wird normalerweise die cancelBubble-Eigenschaft des Ereignisobjekts für den Vorgang verwendet. Das heißt, fügen Sie es direkt in das entsprechende Klickereignis ein:

e.cancelBubble = wahr;

Wenn wir dieses Kompatibilitätsproblem lösen möchten, können wir die folgende Methode verwenden:

wenn(e && e.stopPropagation){
      e.stopPropagation();
  }anders{
      Fenster.Ereignis.AbbrechenBubble = wahr;
  }

Dies ist das Ende dieses Artikels zum Verhindern von Event-Bubbling basierend auf JavaScript. Weitere relevante Inhalte zum Verhindern von Event-Bubbling basierend auf JavaScript finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!

Das könnte Sie auch interessieren:
  • Detaillierte Erklärung der JS-Methode zum Verhindern von Event-Bubbling
  • Beispielanalyse zum Erfassen von JavaScript-Ereignissen und Verhindern von Sprudelereignissen
  • Eine kurze Erläuterung, wie das Aufsteigen von JS-Ereignissen gestoppt werden kann, um das Standardverhalten des Browsers zu verhindern (Verhindern von Hyperlinks#)
  • JavaScript verhindert Event Bläschenbildung und Browser-Standardverhalten
  • Detaillierte Erläuterung der JS-Verhinderung von Bubbling und Standardereignissen (Standardverhalten)
  • Detaillierte Erläuterung des JS-Event-Bubblings, der Event-Erfassung und des Blockierens von Standard-Events
  • Tipps für die JS-Arbeit: „Closure“ und „Preventing Bubbling“ der Event-Delegation

<<:  Nachdem Sie die Einführung des CSS-Boxmodells gelesen haben, werden Sie nicht verwirrt sein

>>:  HTML-Code Textfeld Eingabe begrenzen Textfeld wird grau Textfeldeingabe begrenzen

Artikel empfehlen

Konfigurieren Sie VIM als C++-Entwicklungseditor in Ubuntu

1. Kopieren Sie die Konfigurationsdatei in die Be...

Einführung von Symbolen durch Implementierung benutzerdefinierter Komponenten auf Basis von Vue

Vorwort Bei der Projektentwicklung gibt es viele ...

Allgemeiner HTML-Seitenstil (empfohlen)

Wie unten dargestellt: XML/HTML-CodeInhalt in die...

Neue Verwendung von watch und watchEffect in Vue 3

Inhaltsverzeichnis 1. Neue Verwendung der Uhr 1.1...

VMWare Linux MySQL 5.7.13 Installations- und Konfigurationstutorial

In diesem Artikel finden Sie das Tutorial zur Ins...

So verwenden Sie MySQL Binlog zum Wiederherstellen versehentlich gelöschter Datenbanken

Inhaltsverzeichnis 1 Aktuellen Datenbankinhalt ei...

Detailliertes Tutorial zur Installation von MySQL 8.0.12 unter Windows

In diesem Artikel finden Sie eine ausführliche An...

Anweisungen zur Verwendung von JSON-Operationsfunktionen in Mysql5.7

Vorwort JSON ist ein leichtes Datenaustauschforma...

Eine schnelle Lösung für den Fehler #1929 Falscher Datums-/Uhrzeitwert: '''' für die Spalte ''createtime'' bei Verwendung von MySQL 5.x oder höher

Nachdem ich MySQL installiert hatte, erhielt ich ...

Detaillierte Erläuterung der Konfiguration und Serialisierung von Nest.js-Umgebungsvariablen

Eine kurze Beschreibung der Umgebungsvariablenkon...

So installieren Sie JDK und Mysql auf dem Linux-System Ubuntu 18.04

Plattformbereitstellung 1. JDK installieren Schri...

Eine kurze Diskussion über Tags in HTML

0. Was ist ein Tag? XML/HTML-CodeInhalt in die Zw...

Problem mit Berechtigungen zum Ändern gespeicherter Prozeduren in MySQL

Bei der Verwendung einer MySQL-Datenbank treten h...

Tutorial zur Installation von MySQL mit Docker und zur Implementierung einer Remote-Verbindung

Ziehen Sie das Bild Docker-Pull MySQL Sehen Sie s...

So stellen Sie mit Docker schnell einen Elasticsearch-Cluster bereit

In diesem Artikel werden Docker Container (orches...