Toepassing van die beëindiging van die verspreiding van gebeurtenisse in JavaScript

Laat ons sê binne een ouer het ons 'n knoppie en 'n sekere blok:

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

Laat ons verwysings na ons elemente in veranderlikes kry:

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

Laat ons sê ons blok is aanvanklik versteek:

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

Laat ons dit so maak dat wanneer op die knoppie geklik word, ons blok verskyn:

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

En nou maak ons dit so dat wanneer op enige plek van die ouer geklik word, ons blok weggesteek word:

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

Ons wag egter 'n onverwagte verrassing: aangesien die knoppie binne die ouer is, beteken kliek op die knoppie gelyktydig ook kliek op die ouer. Dit beteken dat eers ons blok sal verskyn, en dan, as gevolg van die verspreiding van die gebeurtenis, sal die hanterder in die ouer aktiveer en ons blok sal verdwyn.

Dit is hier waar die moontlikheid om verspreiding te kanselleer nuttig is: ons kan dit so maak dat wanneer op die knoppie geklik word, verspreiding gekanselleer word, die ouer nie op hierdie kliek reageer nie.

Implementeer self die korrekte werking van die beskryfde taak.