Aplicación de la detención de propagación de eventos en JavaScript

Supongamos que dentro de un mismo padre tenemos un botón y un bloque determinado:

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

Obtengamos referencias a nuestros elementos en variables:

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

Supongamos que nuestro bloque está inicialmente oculto:

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

Hagamos que al hacer clic en el botón nuestro bloque se muestre:

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

Y ahora hagamos que al hacer clic en cualquier lugar del padre nuestro bloque se oculte:

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

Sin embargo, nos espera una sorpresa inesperada: ya que el botón está dentro del padre, hacer clic en el botón también significa hacer clic en el padre. Esto significa que primero nuestro bloque se mostrará, y luego, debido a la propagación del evento, se activará el controlador en el padre y nuestro bloque se ocultará.

Aquí es donde nos será útil la posibilidad de cancelar la propagación: podemos hacer que al hacer clic en el botón se cancele la propagación, y el padre no reaccione a este clic.