Notikumu bubble izslēgšanas pielietojums JavaScript

Pieņemsim, ka viena vecāka ietvaros mums ir poga un noteikts bloks:

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

Iegūsim atsauces uz mūsu elementiem mainīgajos:

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

Pieņemsim, ka mūsu bloks sākotnēji ir paslēpts:

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

Izveidosim tā, lai, noklikšķinot uz pogas, mūsu bloks parādītos:

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

Un tagad izveidosim tā, lai, noklikšķinot uz jebkuras vecāka vietas, mūsu bloks paslēptos:

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

Tomēr mūs gaida negaidīts pārsteigums: tā kā poga atrodas vecāka iekšienē, tad noklikšķināšana uz pogas vienlaikus nozīmē arī noklikšķināšanu uz vecāka. Tas nozīmē, ka vispirms mūsu bloks parādīsies, un pēc tam notikuma bubble dēļ tiks aktivizēts vecāka apstrādātājs un mūsu bloks paslēpsies.

Šeit mums noderēs iespēja atcelt bubble: mēs varam izveidot tā, lai noklikšķinot uz pogas, atceltu bubble, vecāks nereaģētu uz šo klikšķi.

Patstāvīgi realizējiet aprakstītā uzdevuma korektu darbību.