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

Бирок, бизни кутмаган сиюрприз кутмоқда: тугма ота-онанинг ичида жойлашгани сабабли, тугмага босилгани бир вақтнинг ўзида ота-онага босилганини англатади. Бу шунни англатадики, аввало бизнинг блок кўринади, сўнг воқеа кўтарилиши сабабли ота-онадаги ишловчи ишга тушади ва бизнинг блок бекиналиб қолади.

Ана ўшанда бизга кўтарилишни бекор қилиш имконияти керак бўлади: биз шундай қилишимиз мумкинки, тугмага босилганда кўтарилиш бекор қилинса, ота-она ушбу босқичга жавоб бермайди.

Тавсирланган вазифанинг тўғри ишлашини mustaqil ravishda amalga oshiring.