Anwendung der Ereignis-Bubbling-Unterbrechung in JavaScript

Angenommen, wir haben innerhalb eines Elternelements einen Button und einen Block:

<div id="parent">
	<button>click me</button>
	<div id="block">
		text
	</div>
</div>

Wir holen Referenzen auf unsere Elemente in Variablen:

let parent = document.querySelector('#parent');
let button = document.querySelector('button');
let block  = document.querySelector('#block');

Angenommen, unser Block ist anfangs ausgeblendet:

#block:not(.active) {
	display: none;
}

Sorgen wir dafür, dass bei einem Klick auf den Button unser Block eingeblendet wird:

button.addEventListener('click', function() {
	block.classList.add('active');
});

Und jetzt sorgen wir dafür, dass bei einem Klick auf eine beliebige Stelle des Elternelements unser Block ausgeblendet wird:

parent.addEventListener('click', function() {
	block.classList.remove('active');
});

Es erwartet uns jedoch eine unerwartete Überraschung: Da sich der Button innerhalb des Elternelements befindet, bedeutet ein Klick auf den Button gleichzeitig auch einen Klick auf das Elternelement. Das bedeutet, dass zuerst unser Block eingeblendet wird, und dann, aufgrund des Bubbling des Events, der Event-Handler des Elternelements ausgelöst wird und unser Block wieder ausgeblendet wird.

Hier kommt uns die Möglichkeit, das Bubbling zu unterbinden, gerade recht: Wir können dafür sorgen, dass bei einem Klick auf den Button das Bubbling unterbrochen wird, sodass das Elternelement nicht auf diesen Klick reagiert.

Implementieren Sie selbstständig die korrekte Funktionsweise der beschriebenen Aufgabe.