JavaScript/DOM/Event/stopPropagation
Die Methode stopPropagation der Schnittstelle Event des Document Object Models verhindert die Ausbreitung des Events über das Objekt hinaus, für welches der aufgerufene Eventhandler registriert wurde.
Syntax:
event.stopPropagation( )
Im Gegensatz zur Methode stopImmediatePropagation, welche den Aufruf grundsätzlich aller anderen für diesen Ereignistyp registrierten Eventhandler unterbindet, werden nach Aufruf der Methode stopPropagation die für das selbe Objekt mit dem selben Ereignistyp hinzugefügten Eventhandler noch erreicht, bevor die weitere Ausbreitung des Events unterbunden wird.
<body>
<h1>Hallo Welt</h1>
</body>
document.body.addEventListener('click', function (e) {
console.log(e.currentTarget.nodeName);
});
document.body.firstElementChild.addEventListener('click', function (e) {
console.log(this.nodeName);
e.stopPropagation( );
});
Hier haben wir zwei Event-Listener für den Ereignistyp click registriert, einmal für das Element body, welches über die gleichnamige Eigenschaft des Dokumentobjektes referenziert wird, und einmal für dessen erstes Kindelement h1, welches hier der Wert der Objekteigenschaft firstElementChild von body ist.
Die als Callback übergebenen Handlerfunktionen enthalten beide die Anweisung, den in der Eigenschaft mit dem Bezeichner nodeName hinterlegten Namen des jeweiligen Elementes in die Konsole zu schreiben, wobei Body hier über die Event-Eigenschaft currentTarget referenziert wird und h1 über die Funktionsvariable this, welche beim Aufruf als Eventhandler grundsätzlich mit dem Objekt initialisiert wird, für welches die Funktion als Handler registriert wurde. Die für das Element h1 registrierte Handlerfunktion enthält darüber hinaus den Aufruf der Methode stopPropagation.
Normalerweise würde nun, da das Event in seiner Bubbling-Phase abfangen wird, bei einem Klick auf die Überschrift h1 und body in die Konsole geschrieben werden. Durch den Aufruf der Methode stopPropagation innerhalb des für h1 registrierten Eventhandlers wird jedoch intern für das Event-Objekt der stop propagation flag gesetzt, der verhindert, dass nachdem das Event auf seinem Pfad das Element body erreicht hat, der für dieses Element registrierte Eventhandler aufgerufen wird.
