Примена на прекинување на ширењето на настани во JavaScript

Нека внутри на еден родител имаме копче и одреден блок:

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

Ги добиваме референциите кон нашите елементи во променливи:

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

Нека нашиот блок првично е скриен:

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

Да направиме така што при клик на копчето нашиот блок да се прикаже:

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

А сега да направиме така што при клик на кое било место на родителот нашиот блок да се скрие:

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

Сепак, нè чека изненадување: бидејќи копчето се наоѓа внутри на родителот, кликот на копчето истовремено значи и клик на родителот. Ова значи дека прво нашиот блок ќе се прикаже, а потоа поради ширењето на настанот ќе се активира обработувачот во родителот и нашиот блок ќе се скрие.

Токму тука ни е потребна можноста да се откаже ширењето: можеме да направиме така што при клик на копчето да се откаже ширењето, родителот да не реагира на овој клик.

Самостојно имплементирајте коректна работа на опишаната задача.