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

Mobiles Internet-Zeitalter: Responsive Webdesign ist zum allgemeinen Trend geworden

Wir befinden uns in einer Ära der rasanten Entwick...

So verwenden Sie Docker zum Bereitstellen von Front-End-Anwendungen

Docker erfreut sich immer größerer Beliebtheit. E...

So konfigurieren Sie WordPress mit Nginx

Zuvor hatte ich WordPress selbst erstellt, aber d...

jQuery erzielt den Effekt einer Werbung, die nach oben und unten gescrollt wird

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

Die Rolle von nextTick in Vue und mehrere einfache Anwendungsszenarien

Zweck Verstehen Sie die Rolle von nextTick und me...

Tutorial zur Bereitstellung und Installation von MySQL 8.0.18 unter Windows 7

1. Vorbereitende Schritte (Windows 7 + MySQL-8.0....

So lösen Sie das Problem, dass das Kennwort nach dem Dekomprimieren der kostenlosen MySQL-Installationsversion nicht gefunden wird

1. Entpacken Sie mysql-8.0.21-winx64 2. Konfiguri...

Detaillierte Erklärung zum Datenaustausch zwischen Vue-Komponenten

Inhaltsverzeichnis 1. In der Projektentwicklung w...

Methode zum Erkennen, ob IP und Port verbindbar sind

Windows cmd Telnet Format: Telnet-IP-Port Fall: T...

So laden Sie das JAR-Paket über die Webseite auf Nexus hoch

Wie lädt man das JAR-Paket in ein privates Lager ...

CSS implementiert die Webkomponentenfunktion zum Verschieben des Nachrichtenfelds

Hallo zusammen, ich frage mich, ob ihr die gleich...

Detaillierte Erläuterung der MySQL-Mehrtabellenabfrage

Sich gut zu ernähren und ausreichend zu schlafen,...

Mehrere Möglichkeiten zum Herunterfahren des Hyper-V-Dienstes unter Windows 10

Wenn Sie VMware Workstation zum Öffnen einer virt...

Die WeChat-Applet-Entwicklung realisiert die Aktivitätsleitfunktion für Popup-Fenster auf der Startseite

Inhaltsverzeichnis 1. Nachfrage 2. Datenbankdesig...

JavaScript implementiert schnell Kalendereffekte

In diesem Artikelbeispiel wird der spezifische Ja...