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

Spezifische Verwendungsanweisungen für MySQL-Joins

Inhaltsverzeichnis Join-Syntax: 1. InnerJOIN: (In...

Mehrbenutzer-Lizenzierung für Remotedesktopverbindungen unter Windows Server 2008 R2

Bei der Arbeit benötigen wir häufig Remote-Server...

Dockers Mechanismus zur Integritätserkennung

Für Container ist die einfachste Integritätsprüfu...

Gründe und Lösungen für langsame MySQL-Abfragen, die beim Senden von Daten hängen bleiben

Weil ich ein Python-Programm geschrieben und inte...

MySQL-Abfrage doppelter Daten (löschen Sie doppelte Daten und behalten Sie die Daten mit der kleinsten ID als einzige Daten)

Entwicklungshintergrund: Ich arbeite derzeit an e...

So verwenden Sie async und await in JS

Inhaltsverzeichnis 1. asynchron 2. warten: 3. Umf...

So optimieren Sie den Logikbeurteilungscode in JavaScript

Vorwort Zu den logischen Urteilsaussagen, die wir...

MySQL-Batch löschen großer Datenmengen

MySQL-Batch löschen großer Datenmengen Angenommen...

JavaScript implementiert die asynchrone Erfassung von Formulardaten

In diesem Artikelbeispiel wird der spezifische Co...

Detailliertes Tutorial zur Installation von Prometheus mit Docker

Inhaltsverzeichnis 1. Node Exporter installieren ...

Eine kurze Erläuterung der vier häufig verwendeten Speicher-Engines in MySQL

Einführung in vier häufig verwendete MySQL-Engine...

W3C Tutorial (13): W3C WSDL Aktivitäten

Bei Webdiensten geht es um die Kommunikation zwis...

So schreiben Sie DROP TABLE in verschiedene Datenbanken

So schreiben Sie DROP TABLE in verschiedene Daten...

Detailliertes Tutorial zum Hochladen und Konfigurieren von JDK und Tomcat unter Linux

Vorbereitung 1. Starten Sie die virtuelle Maschin...

Vue implementiert ein einfaches Einkaufswagenbeispiel

In diesem Artikel wird der spezifische Code von V...