Sündmuste levimise peatamise rakendamine JavaScriptis

Oletame, et ühe vanema sees on meil nupp ja mingi plokk:

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

Hankige viidad meie elementidele muutujatesse:

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

Oletame, et meie plokk on alguses peidetud:

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

Teeme nii, et nupule klõpsates meie plokk näitaks ennast:

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

Ja nüüd teeme nii, et mis tahes kohale klõpsates vanem meie plokk peidab ennast:

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

Ootab meid aga ootamatu üllatus: nii nagu nupp asub vanema sees, siis klõps nupul tähendab samal ajal ka klõpsu vanemal. See tähendab, et kõigepealt meie plokk näitab ennast, seejärel leviva sündmuse tõttu käivitub töötleja vanemas ja meie plokk peidab ennast.

Siin tulebki meile kasuks võimalus tühistada levimine: me saame teha nii, et nupule klõpsamisel tühistada levimine, vanem ei reageeri sellele klõpsule.

Rakenda iseseisvalt kirjeldatud ülesande korrektne töötamine.