Tapahtumien kuplimisen keskeyttämisen soveltaminen JavaScriptissä

Oletetaan, että yhden vanhemman sisällä meillä on painike ja jokin lohko:

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

Haetaan viitteet elementteihimme muuttujiin:

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

Oletetaan, että lohkomme on aluksi piilotettu:

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

Tehdään niin, että painiketta klikkaamalla lohkomme tulee näkyviin:

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

Ja nyt tehdään niin, että mihin tahansa vanhemman kohtaan klikkaamalla lohkomme piilotetaan:

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

Meitä odottaa kuitenkin yllätys: koska painike sijaitsee vanhemman sisällä, painikkeen klikkaus tarkoittaa samanaikaisesti myös vanhemman klikkausta. Tämä tarkoittaa, että ensin lohkomme tulee näkyviin, mutta sitten tapahtuman kuplimisen vuoksi vanhemman käsittelijä toimii ja lohkomme piilotetaan.

Tässä vaiheessa tarvitsemme mahdollisuuden keskeyttää kupliminen: voimme tehdä niin, että kun klikataan painiketta, kupliminen keskeytetään, vanhempi ei reagoi tähän klikkaukseen.

Toteuta itsenäisesti kuvatun tehtävän oikea toiminta.