Anvendelse af stoppelse af event bubbling i JavaScript

Lad os inde i en forælder have en knap og en blok:

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

Lad os få referencer til vores elementer i variabler:

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

Lad vores blok være skjult fra starten:

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

Lad os gøre sådan, at ved et klik på knappen bliver vores blok vist:

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

Og lad os nu gøre sådan, at ved et klik på ethvert sted i forælderen bliver vores blok skjult:

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

Vi venter dog en overraskelse: da knappen er placeret inde i forælderen, så betyder et klik på knappen samtidig også et klik på forælderen. Det betyder, at først bliver vores blok vist, og derefter, på grund af event bubbling, udløses forælderens event handler og vores blok bliver skjult.

Det er her, muligheden for at stoppe bubbling bliver nyttig: vi kan gøre sådan, at ved et klik på knappen stopper vi bubbling, så forælderen ikke reagerer på dette klik.

Implementer selv den korrekte funktionalitet for den beskrevne opgave.