Tillämpning av att stoppa eventbubblan i JavaScript

Låt oss säga att vi inuti en förälder har en knapp och ett visst block:

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

Låt oss hämta referenser till våra element i variabler:

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

Låt oss säga att vårt block initialt är dolt:

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

Låt oss göra så att när man klickar på knappen så visas vårt block:

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

Och nu gör vi så att när man klickar på vilken plats som helst på föräldern så döljs vårt block:

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

Men vi kommer att mötas av en oväntad överraskning: eftersom knappen finns inuti föräldern så betyder klick på knappen samtidigt också klick på föräldern. Det betyder att först kommer vårt block att visas, och sedan på grund av eventbubblan kommer hanteraren i föräldern att triggas och vårt block kommer att döljas.

Det är här möjligheten att avbryta bubblan kommer till användning: vi kan göra så att när man klickar på knappen avbryter vi bubblan, så att föräldern inte reagerar på detta klick.

Implementera självständigt korrekt funktionalitet för den beskrivna uppgiften.