Aplicação do cancelamento de propagação de eventos em JavaScript

Suponha que dentro de um mesmo elemento pai temos um botão e um determinado bloco:

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

Vamos obter referências aos nossos elementos em variáveis:

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

Suponha que nosso bloco está inicialmente oculto:

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

Vamos fazer com que ao clicar no botão, o nosso bloco seja exibido:

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

E agora vamos fazer com que ao clicar em qualquer lugar do elemento pai, nosso bloco seja ocultado:

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

No entanto, nos aguarda uma surpresa inesperada: como o botão está dentro do elemento pai, então um clique no botão também significa um clique no elemento pai. Isso significa que primeiro nosso bloco será exibido, e depois, devido à propagação do evento, o manipulador do elemento pai será acionado e nosso bloco será ocultado.

É aqui que a capacidade de cancelar a propagação se torna útil: podemos fazer com que ao clicar no botão, cancelando a propagação, o elemento pai não reaja a esse clique.

Implemente de forma independente o funcionamento correto da tarefa descrita.