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

So setzen Sie das Root-Passwort in mysql8.0.12 zurück

Wenn Sie nach der Installation der Datenbank das ...

Ausführliche Erklärung des Sperrmechanismus in MySQL

Vorwort Um die Konsistenz und Integrität der Date...

WeChat Mini-Programme werden global über die Uni-App geteilt

Bei der tatsächlichen Verwendung ist es häufig er...

So löschen Sie eine Eigenschaft eines Objekts in JavaScript

1. löschen delete ist die einzige wirkliche Mögli...

Analyse der Nutzung des Xmeter API-Schnittstellentesttools

XMeter API bietet einen umfassenden Online-Schnit...

Wie gestaltet man eine Webseite? Wie erstelle ich eine Webseite?

Wenn es um das Verständnis von Webdesign geht, sc...

So lösen Sie das Problem der Randüberlappung

1. Zunächst müssen Sie wissen, was den vertikalen ...

Detaillierte Schritte zur Installation von Nginx auf dem Apple M1-Chip und zum Bereitstellen eines Vue-Projekts

brew install nginx Apple Mac verwendet zur Instal...

Natives JS zur Implementierung eines einfachen Rechners

In diesem Artikelbeispiel wird der spezifische Co...

Ein Beispiel für die Implementierung einer einfachen Fingerklick-Animation mit CSS3 Animation

Dieser Artikel stellt hauptsächlich ein Beispiel ...

Methoden zur Verbesserung der Zugriffskontrollsicherheit im Linux-Kernel

Hintergrund Vor einiger Zeit half unser Projektte...

Drei Möglichkeiten zum Löschen einer Tabelle in MySQL (Zusammenfassung)

Drop-Tabelle Drop löscht Tabelleninformationen di...

Eine kurze Analyse der parallelen WriteSet-Replikation von MySQL

【Historischer Hintergrund】 Ich arbeite seit drei ...

So geben Sie Speicherplatz unter CentOS 6 oder CentOS 7 frei

Nachfolgend finden Sie die Schnellbefehle zum Fre...

Website-Erstellungs-Tutorial für Anfänger: Lernen Sie, in zehn Tagen eine Website zu erstellen

Das 10-tägige Tutorial verwendet eine äußerst ver...