Uporaba prekinitve širjenja dogodkov v JavaScript

Naj imamo znotraj enega starša gumb in določen blok:

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

Pridobimo reference na naše elemente v spremenljivke:

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

Naj bo naš blok sprva skrit:

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

Naredimo tako, da se ob kliku na gumb naš blok prikaže:

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

In zdaj naredimo tako, da se ob kliku na katero koli mesto starša naš blok skrije:

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

Vendar nas čaka neprijetno presenečenje: ker je gumb znotraj starša, klik na gumb hkrati pomeni tudi klik na starša. To pomeni, da se bo najprej naš blok prikazal, nato pa bo zaradi širjenja dogodka sprožil se obdelovalec v staršu in naš blok se bo skril.

Tukaj nam pride prav možnost prekinitve širjenja: lahko naredimo tako, da ob kliku na gumb prekličemo širjenje, starš se na ta klik ne odzove.

Samostojno implementirajte pravilno delovanje opisane naloge.