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');
});

Бирок, бизти күтүлбөгөн сюрприз күтөт: анткени баскыч ата-эненен ичинде жатат, демек баскычка чыкылдоо бир эле учурда ата-ээнеге да чыкылдоону билдирет. Бул биздин блок алгач көрүнөт, кийин окуянын жайылуусунан улам ата-эненин иштеткичи иштеп чыгып, биздин блок жашырыла турганын билдирет.

Мына ушул жерде жайылууну токтотуу мүмкүнчүлүгү бизге керек болот: баскычка чыкылдаганда жайылууну токтотсо болот, ата-эне бул чыкылдоого жооп бербей калат.

Өзүңүздүн күчүңүз менен сүрөттөлгөн маселенин туура иштөөсүн ишке ашырыңыз.