Penggunaan Penghentian Bubbling Peristiwa dalam JavaScript

Katakan dalam satu elemen induk terdapat butang dan satu blok:

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

Dapatkan rujukan kepada elemen-elemen kita dalam pembolehubah:

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

Katakan blok kita pada asalnya tersembunyi:

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

Mari kita buat supaya apabila diklik pada butang, blok kita akan dipaparkan:

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

Dan sekarang mari kita buat supaya apabila diklik pada mana-mana tempat induk, blok kita akan disembunyikan:

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

Walau bagaimanapun, kita akan dikejutkan dengan kejutan yang tidak dijangka: oleh kerana butang terletak di dalam induk, maka klik pada butang secara serentak juga bermaksud klik pada induk. Ini bermakna bahawa pada mulanya blok kita akan dipaparkan, dan kemudian disebabkan oleh bubbling peristiwa, pengendali pada induk akan dijalankan dan blok kita akan disembunyikan.

Di sinilah keupayaan untuk membatalkan bubbling berguna kepada kita: kita boleh membuat supaya apabila klik pada butang membatalkan bubbling, induk tidak bertindak balas terhadap klik tersebut.

Laksanakan sendiri kerja yang betul bagi tugas yang diterangkan.