Toepassing van het stoppen van event bubbling in JavaScript

Stel dat we binnen één ouder een knop en een bepaald blok hebben:

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

Laten we verwijzingen naar onze elementen in variabelen krijgen:

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

Stel dat ons blok initieel verborgen is:

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

Laten we ervoor zorgen dat bij een klik op de knop ons blok zichtbaar wordt:

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

En laten we nu ervoor zorgen dat bij een klik op een willekeurige plek van de ouder ons blok verborgen wordt:

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

We staan echter voor een verrassing: omdat de knop zich binnen de ouder bevindt, betekent een klik op de knop tegelijkertijd ook een klik op de ouder. Dit betekent dat eerst ons blok zichtbaar wordt, en vervolgens, vanwege het bubbelen van de event, de event handler van de ouder wordt uitgevoerd en ons blok weer verdwijnt.

Hier komt de mogelijkheid om bubbling te stoppen van pas: we kunnen ervoor zorgen dat bij een klik op de knop de bubbling wordt gestopt, zodat de ouder niet reageert op deze klik.

Implementeer zelf de correcte werking van de beschreven taak.