Penerapan Penghentian Bubbling Event di JavaScript

Misalkan di dalam satu induk, kita memiliki tombol dan suatu blok:

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

Dapatkan referensi elemen-elemen kita ke dalam variabel:

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

Misalkan blok kita awalnya tersembunyi:

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

Mari kita atur sehingga ketika tombol diklik, blok kita ditampilkan:

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

Dan sekarang mari kita atur sehingga ketika mengklik di mana saja pada induk, blok kita disembunyikan:

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

Namun, kita akan mendapatkan kejutan yang tidak terduga: karena tombol berada di dalam induk, maka klik pada tombol secara bersamaan juga berarti klik pada induk. Ini berarti bahwa awalnya blok kita akan ditampilkan, kemudian karena bubbling event, handler pada induk akan terpicu dan blok kita akan disembunyikan.

Di sinilah kemampuan untuk membatalkan bubbling berguna bagi kita: kita dapat mengatur agar ketika mengklik tombol, bubbling dibatalkan, sehingga induk tidak merespons klik ini.

Implementasikan sendiri kerja yang benar dari tugas yang dijelaskan.