Примена спречавања подизања догађаја у 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');
});

Међутим, чека нас неочекивано изненађење: пошто је дугме унутар родитеља, то клик на дугме истовремено значи и клик на родитеља. То значи да ће се прво наш блок приказати, а затим због подизања догађаја активирати руковалац на родитељу и наш блок ће се сакрити.

Ево где нам је корисна могућност да се откаже подизање догађаја: можемо урадити тако да при клику на дугме откажемо подизање, па родитељ неће реагирати на тај клик.

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