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

Алайда, біз күткен жерден күтпеген сюрпризге тап боламыз: батырма ата-ананың ішінде орналасқандықтан, батырманы басу бір мезгілде ата-ананы басуды білдіреді. Бұл дегеніміз, алдымен біздің блок көрінеді, содан кейін оқиғаның көтерілуі себебінен ата-анадағы өңдеуші жұмыс істейді және біздің блок жасырылады.

Міне, осы жерде бізге көтерілуді болдырмау мүмкіндігі көмекке келеді: батырманы басқанда көтерілуді тоқтатуды жасай аламыз, ата-ана осы басуға жауап бермейді.

Сипатталған тапсырманың дұрыс жұмыс істеуін өздігіңізше жүзеге асырыңыз.