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:

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

Obtengamos referencias a nuestros elementos en variables:

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

Supongamos que nuestro bloque está inicialmente oculto:

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

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

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

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

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

Implemente de forma independiente el funcionamiento correcto de la tarea descrita.