Matumizi ya Kuzuia Kupaa kwa Matukio katika JavaScript

Wacha ndani ya mzazi mmoja tuwe na kifungo na kizuizi fulani:

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

Tupate viungo kwa vipengele vyetu kwenye anuwai:

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

Wacha kizuizi chetu mwanzoni kifichike:

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

Tufanye ili kubonyeza kifungo kizuizi chetu kionekane:

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

Na sasa tufanye ili kubonyeza mahali popote ya mzazi kizuizi chetu kifichike:

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

Hata hivyo, tunasubiri mshtuko usiotarajiwa: kwa kuwa kifungo kiko ndani ya mzazi, basi kubonyeza kifungo wakati huo huo kunamaanisha kubonyeza mzazi. Hii inamaanisha kuwa mwanzoni kizuizi chetu kitaonekana, kisha kwa sababu ya kupaa kwa tukio kichakataji kwenye mzazi kitafanya kazi na kizuizi chetu kitafichika.

Hapa ndipo uwezo wa kufutilia mbali kupaa unatuhitajika: tunaweza kufanya ili kubonyeza kifungo kufutilia mbali kupaa, mzazi asihusike na kubonyeza huku.

Wekea utekelezaji pekee yako kazi sahihi ya kazi iliyoelezewa.