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 :

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

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

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

Supposons que notre bloc soit initialement caché :

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

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

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

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

javascriptparent.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.