Իրադարձությունների բաբլյուխի դադարեցման կիրառումը JavaScript-ում

Ենթադրենք՝ մի ծնողի ներսում ունենք կոճակ և որոշակի բլոկ.

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

Ստացենք մեր էլեմենտների հղումները փոփոխականների մեջ.

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

Ենթադրենք՝ մեր բլոկը սկզբում թաքնված է.

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

Եկեք անենք այնպես, որ կոճակի վրա կտտացնելիս մեր բլոկը ցուցադրվի.

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

Իսկ հիմա եկեք անենք այնպես, որ ծնողի ցանկացած տեղում կտտացնելիս մեր բլոկը թաքնվի.

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

Սակայն մեզ անսպասելի անակնկալ է սպասում. քանի որ կոճակը գտնվում է ծնողի ներսում, ապա կոճակի վրա կտտացնելը միաժամանակ նշանակում է նաև կտտոց ծնողի վրա: Սա նշանակում է, որ սկզբում մեր բլոկը կցուցադրվի, ապա՝ իրադարձության բաբլյուխի պատճառով, կգործարկվի ծնողի մշակիչը և մեր բլոկը կթաքնվի:

Ահա այստեղ է, որ մեզ օգտակար է բաբլյուխը դադարեցնելու հնարավորությունը. մենք կարող ենք անել այնպես, որ կոճակի վրա կտտացնելիս դադարեցնել բաբլյուխը, և ծնողը չարձագանքի այս կտտոցին:

Ինքնուրույն իրականացրեք նկարագրված առաջադրանքի ճիշտ աշխատանքը: