Įvykių plitimo sustabdymo taikymas JavaScript

Tarkime, kad vieno tėvinio elemento viduje turime mygtuką ir tam tikrą bloką:

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

Gaukime nuorodas į mūsų elementus kintamuosiuose:

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

Tarkime, kad mūsų blokas iš pradžių yra paslėptas:

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

Padarykime taip, kad paspaudus ant mygtuką mūsų blokas būtų rodomas:

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

O dabar padarykime taip, kad paspaudus bet kur tėvinio elemento vietoje mūsų blokas būtų paslėptas:

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

Tačiau mūsų laukia netikėta staigmena: kadangi mygtukas yra tėvinio elemento viduje, tai paspaudimas ant mygtuko tuo pačiu reiškia ir paspaudimą ant tėvinio elemento. Tai reiškia, kad iš pradžių mūsų blokas bus rodomas, o vėliau dėl įvykio plitimo suveiks tėvinio elemento doroklis ir mūsų blokas bus paslėptas.

Štai čia mums ir pravers galimybė sustabdyti plitimą: mes galime padaryti taip, kad kai spaudžiama ant mygtuko, būtų sustabdomas plitimas, tėvinis elementas nereaguotų į šį paspaudimą.

Savarankiškai implementuokite teisingą aprašytos užduoties veikimą.