Anvendelse av stopp av hendelsesbobling i JavaScript

La oss si at innenfor en forelder har vi en knapp og en blokk:

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

La oss hente referanser til elementene våre i variabler:

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

La oss si at blokken vår i utgangspunktet er skjult:

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

La oss gjøre slik at ved klikk på knappen vil blokken vår vises:

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

Og nå la oss gjøre slik at ved klikk på et hvilket som helst sted på forelderen vil blokken vår skjules:

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

Imidlertid venter en overraskelse på oss: siden knappen er plassert innenfor forelderen, betyr klikk på knappen samtidig også klikk på forelderen. Dette betyr at først vil blokken vår vises, og deretter, på grunn av hendelsesbobling, vil forelderens hendelseshåndterer utløses og blokken vår skjules.

Det er her muligheten til å avbryte bobling kommer til nytte: vi kan gjøre slik at ved klikk på knappen avbrytes boblingen, og forelderen ikke reagerer på dette klikket.

Implementer den korrekte funksjonaliteten for den beskrevne oppgaven på egen hånd.