Az eseménybuborékolás megállításának alkalmazása JavaScriptben

Tegyük fel, hogy egy szülőn belül van egy gomb és egy bizonyos blokk:

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

Kapjuk meg az elemekre mutató hivatkozásokat változókba:

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

Tegyük fel, hogy a blokkunk eredetileg rejtett:

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

Tegyük úgy, hogy a gombra kattintáskor a blokkunk megjelenjen:

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

Most pedig tegyük úgy, hogy a szülő bármely pontjára kattintáskor a blokkunk elrejtődjön:

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

Azonban váratlan meglepetés ér minket: mivel a gomb a szülőn belül van, a gombra kattintás egyben a szülőre kattintást is jelenti. Ez azt jelenti, hogy először a blokkunk megjelenik, majd az esemény buborékolása miatt a szülőben lévő kezelő aktiválódik, és a blokkunk elrejtődzik.

Itt jön jól a buborékolás megállításának lehetősége: elérhetjük, hogy a gombra kattintáskor a buborékolást megállítva, a szülő ne reagáljon erre a kattintásra.

Valósítsa meg önállóan a leírt feladat helyes működését.