Zbatimi i ndalimit të përhapjes së ngjarjeve në JavaScript

Le të themi se brenda një prindi kemi një buton dhe një bllok të caktuar:

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

Le të marrim referencat e elementeve tona në variabla:

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

Le të themi se blloku ynë fillimisht është i fshehur:

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

Le të bëjmë që me klikim në buton, blloku ynë të shfaqet:

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

Dhe tani le të bëjmë që me klikim në çdo vend të prindit, blloku ynë të fshihet:

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

Sidoqoftë, ne pret një surprizë e papritur: meqenëse butoni ndodhet brenda prindit, atëherë klikimi në buton në të njëjtën kohë do të thotë edhe klikim në prind. Kjo do të thotë se fillimisht blloku ynë do të shfaqet, dhe pastaj për shkak të përhapjes së ngjarjes, do të aktivizohet përpunuesi në prind dhe blloku ynë do të fshihet.

Këtu na nevojitet aftësia për të anuluar përhapjen: ne mund ta bëjmë që kur klikohet në buton të anulohet përhapja, prindi të mos reagojë në këtë klikim.

Zbatoni në mënyrë të pavarur funksionimin korrekt të detyrës së përshkruar.