Application de l'arrêt de la propagation d'événements en JavaScript

Supposons qu'à l'intérieur d'un parent, nous ayons un bouton et un certain bloc :

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

Obtenons des références à nos éléments dans des variables :

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

Supposons que notre bloc soit initialement caché :

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

Faisons en sorte qu'un clic sur le bouton affiche notre bloc :

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

Et maintenant, faisons en sorte qu'un clic n'importe où sur le parent cache notre bloc :

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

Cependant, une surprise nous attend : comme le bouton se trouve à l'intérieur du parent, un clic sur le bouton signifie également un clic sur le parent. Cela signifie que d'abord notre bloc sera affiché, puis à cause de la propagation de l'événement, le gestionnaire du parent se déclenchera et notre bloc sera caché.

C'est ici que la possibilité d'annuler la propagation nous sera utile : nous pouvons faire en sorte qu'en cliquant sur le bouton pour annuler la propagation, le parent ne réagisse pas à ce clic.

Implémentez de manière autonome le fonctionnement correct de la tâche décrite.