Warum wird das Event-Bubbling zweimal ausgel?st?
Feb 22, 2024 am 09:06 AM
Warum wird das Event Sprudeln zweimal ausgel?st?
Ereignisblasen bedeutet, dass im DOM, wenn ein Element ein Ereignis ausl?st (z. B. ein Klickereignis), das Ereignis vom Element zum übergeordneten Element aufsteigt, bis es nach oben zum Dokumentobjekt gelangt. Das Ereignis-Bubbling ist Teil des DOM-Ereignismodells, das es Entwicklern erm?glicht, Ereignis-Listener an übergeordnete Elemente zu binden, sodass, wenn untergeordnete Elemente Ereignisse ausl?sen, diese Ereignisse erfasst und über den Bubbling-Mechanismus verarbeitet werden k?nnen.
Allerdings sto?en Entwickler manchmal auf Situationen, in denen Ereignisse in die Luft sprudeln und zweimal ausgel?st werden, was normalerweise bei verschachtelten Elementen der Fall ist. Um besser zu verstehen, warum es zweimal ausgel?st wird, schauen wir uns ein bestimmtes Codebeispiel an.
HTML-Code lautet wie folgt:
<div id="parent">
<div id="child">
<button id="button">點擊我</button>
</div>
</div>JavaScript-Code lautet wie folgt:
var parent = document.getElementById("parent");
var child = document.getElementById("child");
var button = document.getElementById("button");
parent.addEventListener("click", function(event) {
console.log("父元素被點擊");
});
child.addEventListener("click", function(event) {
console.log("子元素被點擊");
});
button.addEventListener("click", function(event) {
console.log("按鈕被點擊");
event.stopPropagation();
});Im obigen Code haben wir ein übergeordnetes Element, ein untergeordnetes Element und eine Schaltfl?che, die jeweils an Klickereignis-Listener gebunden sind. Wenn wir auf einer Webseite auf eine Schaltfl?che klicken, wird das Ereignis gem?? den Bubbling-Regeln vom untergeordneten Element an das übergeordnete Element übergeben.
Jetzt simulieren wir einen Tastenklick. Wenn wir auf die Schaltfl?che klicken, gibt die Konsole die folgende Ausgabe aus:
按鈕被點擊 子元素被點擊
Warum wird es zweimal ausgel?st?
Das liegt daran, dass die Ereignissprudelung beim ausl?senden Element beginnt und der Reihe nach zum übergeordneten Element aufsteigt und in diesem Prozess zwei Schichten aus untergeordneten Elementen und übergeordneten Elementen durchl?uft. Wenn wir auf die Schaltfl?che klicken, wird zun?chst das Klickereignis der Schaltfl?che ausgel?st und ?Auf die Schaltfl?che wurde geklickt“ wird gedruckt. Dann sprudelt das Ereignis weiter zum untergeordneten Element, l?st das Klickereignis des untergeordneten Elements aus und gibt die Meldung ?Untergeordnetes Element wurde angeklickt“ aus. Schlie?lich setzt sich das Sprudeln bis zum übergeordneten Element fort und l?st das Klickereignis des übergeordneten Elements aus.
Wie kann man also verhindern, dass das Ereignis zweimal sprudelt und ausgel?st wird?
Wir k?nnen verhindern, dass das Ereignis sprudelt, indem wir event.stopPropagation() im Click-Event-Handler der Schaltfl?che aufrufen. Im obigen Code haben wir diese Methode im Click-Ereignis der Schaltfl?che verwendet. Wenn wir erneut auf die Schaltfl?che klicken, gibt die Konsole nur ?auf die Schaltfl?che geklickt“ aus, ohne weiterhin zu untergeordneten und übergeordneten Elementen zu gelangen. event.stopPropagation()來阻止事件繼續(xù)冒泡。在上述代碼中，我們已經(jīng)在按鈕的點擊事件中使用了這個方法。當我們再次點擊按鈕時，控制臺將只打印出"按鈕被點擊"，而不會繼續(xù)冒泡至子元素和父元素。
總結來說，事件冒泡會觸發(fā)兩次的情況通常出現(xiàn)在嵌套元素中，當一個元素觸發(fā)了某個事件時，事件會從觸發(fā)元素開始向上冒泡至父元素，直到冒泡到最頂層的文檔對象為止。然而，我們可以通過調用event.stopPropagation()
event.stopPropagation() aufrufen und so verhindern, dass das Ereignis zweimal ausgel?st wird. ??Das obige ist der detaillierte Inhalt vonWarum wird das Event-Bubbling zweimal ausgel?st?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Hei?e KI -Werkzeuge
Undress AI Tool
Ausziehbilder kostenlos
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Clothoff.io
KI-Kleiderentferner
Video Face Swap
Tauschen Sie Gesichter in jedem Video mühelos mit unserem v?llig kostenlosen KI-Gesichtstausch-Tool aus!
Hei?er Artikel
Hei?e Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
So richten Sie Jump on Laui-Anmeldeseite ein
Apr 04, 2024 am 03:12 AM
Schritte zur Sprungeinstellung der Layui-Anmeldeseite: Sprungcode hinzufügen: Fügen Sie im Anmeldeformular ein Beurteilungsereignis hinzu, klicken Sie auf die Schaltfl?che ?Senden“ und springen Sie nach erfolgreicher Anmeldung über window.location.href zur angegebenen Seite. ?ndern Sie die Formularkonfiguration: Fügen Sie dem Formularelement von ?lay-filter="login" ein verstecktes Eingabefeld mit dem Namen ?redirect“ und dem Wert der Zielseitenadresse hinzu.
So fügen Sie in Vue Berührungsereignisse zu Bildern hinzu
May 02, 2024 pm 10:21 PM
Wie füge ich in Vue ein Klickereignis zum Bild hinzu? Importieren Sie die Vue-Instanz. Erstellen Sie eine Vue-Instanz. Fügen Sie Bilder zu HTML-Vorlagen hinzu. Fügen Sie Klickereignisse mit der v-on:click-Direktive hinzu. Definieren Sie die handleClick-Methode in der Vue-Instanz.
Hongmeng HarmonyOS- und Go-Sprachentwicklung
Apr 08, 2024 pm 04:48 PM
Einführung in die Sprachentwicklung von HarmonyOS und Go. HarmonyOS ist ein von Huawei entwickeltes verteiltes Betriebssystem, und Go ist eine moderne Programmiersprache. Die Kombination der beiden bietet eine leistungsstarke L?sung für die Entwicklung verteilter Anwendungen. In diesem Artikel wird die Verwendung der Go-Sprache für die Entwicklung in HarmonyOS vorgestellt und das Verst?ndnis anhand praktischer F?lle vertieft. Installation und Einrichtung Um die Go-Sprache zum Entwickeln von HarmonyOS-Anwendungen zu verwenden, müssen Sie zuerst GoSDK und HarmonyOSSDK installieren. Die spezifischen Schritte sind wie folgt: #Installieren Sie GoSDKgogetgithub.com/golang/go#Set PATH
So fügen Sie Funktionen zu Schaltfl?chen für Vue hinzu
Apr 08, 2025 am 08:51 AM
Sie k?nnen der VUE -Taste eine Funktion hinzufügen, indem Sie die Taste in der HTML -Vorlage an eine Methode binden. Definieren Sie die Methode und schreiben Sie die Funktionslogik in der VUE -Instanz.
Was ist der ereignisgesteuerte Mechanismus von C++-Funktionen in der gleichzeitigen Programmierung?
Apr 26, 2024 pm 02:15 PM
Der ereignisgesteuerte Mechanismus in der gleichzeitigen Programmierung reagiert auf externe Ereignisse, indem er beim Eintreten von Ereignissen Rückruffunktionen ausführt. In C++ kann der ereignisgesteuerte Mechanismus mit Funktionszeigern implementiert werden: Funktionszeiger k?nnen Callback-Funktionen registrieren, die beim Eintreten von Ereignissen ausgeführt werden sollen. Lambda-Ausdrücke k?nnen auch Ereignisrückrufe implementieren und so die Erstellung anonymer Funktionsobjekte erm?glichen. Im konkreten Fall werden Funktionszeiger verwendet, um Klickereignisse für GUI-Schaltfl?chen zu implementieren, die Rückruffunktion aufzurufen und Meldungen zu drucken, wenn das Ereignis auftritt.
Was bedeutet div in CSS?
Apr 28, 2024 pm 02:21 PM
Ein DIV in CSS ist ein Dokumententrenner oder Container, der zum Gruppieren von Inhalten, zum Erstellen von Layouts, zum Hinzufügen von Stil und zur Interaktivit?t verwendet wird. In HTML verwendet das DIV-Element die Syntax <div></div>, wobei div ein Element darstellt, dem Attribute und Inhalte hinzugefügt werden k?nnen. DIV ist ein Element auf Blockebene, das eine ganze Zeile im Browser einnimmt.
So verwenden Sie Void in Java
May 01, 2024 pm 06:15 PM
void bedeutet in Java, dass die Methode keinen Wert zurückgibt und h?ufig zum Ausführen von Operationen oder zum Initialisieren von Objekten verwendet wird. Das Deklarationsformat der void-Methode lautet: void methodName(), und die aufrufende Methode ist methodName(). Die void-Methode wird h?ufig verwendet für: 1. Durchführen von Vorg?ngen ohne Rückgabe eines Werts; 3. Durchführen von Vorg?ngen zur Ereignisverarbeitung;
Detaillierte Erl?uterung des Abrufens von Webseitenelementen durch JavaScript
Apr 09, 2024 pm 12:45 PM
Antwort: JavaScript bietet eine Vielzahl von Methoden zum Abrufen von Webseitenelementen, einschlie?lich der Verwendung von IDs, Tag-Namen, Klassennamen und CSS-Selektoren. Detaillierte Beschreibung: getElementById(id): Elemente basierend auf einer eindeutigen ID abrufen. getElementsByTagName(tag): Ruft die Elementgruppe mit dem angegebenen Tag-Namen ab. getElementsByClassName(class): Ruft die Elementgruppe mit dem angegebenen Klassennamen ab. querySelector(selector): Verwenden Sie den CSS-Selektor, um das erste passende Element abzurufen. querySelectorAll(selector): Alle übereinstimmungen mithilfe des CSS-Selektors abrufen
