Zastosowanie zapobiegania propagacji zdarzeń w JavaScript

Załóżmy, że wewnątrz jednego rodzica mamy przycisk i pewien blok:

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

Pobierzmy referencje do naszych elementów do zmiennych:

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

Załóżmy, że nasz blok jest początkowo ukryty:

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

Sprawmy, aby po kliknięciu przycisku nasz blok został pokazany:

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

A teraz sprawmy, aby po kliknięciu w dowolne miejsce rodzica nasz blok został ukryty:

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

Czeka nas jednak niespodzianka: ponieważ przycisk znajduje się wewnątrz rodzica, kliknięcie przycisku jednocześnie oznacza kliknięcie rodzica. Oznacza to, że najpierw nasz blok się pokaże, a następnie z powodu propagacji zdarzenia uruchomi się procedura obsługi w rodzicu i nasz blok się ukryje.

Tutaj przyda nam się możliwość anulowania propagacji: możemy sprawić, że przy kliknięciu przycisku anulujemy propagację, rodzic nie zareaguje na to kliknięcie.

Samodzielnie zaimplementuj poprawne działanie opisanego zadania.