JavaScriptda Hodisa Oʻtarishni Toʻxtatishni Qoʻllash

Faraz qilaylik, bitta ota-ishchi ichida bizda tugma va maʼlum bir blok bor:

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

Elementlarning havolalarini o'zgaruvchilarga olaylik:

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

Faraz qilaylik, bizning blokimiz dastlab yashiringan:

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

Keling, tugmacha bosilganda bizning blokimiz koʻrinadigan qilaylik:

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

Endi esa, ota-ishchining istalgan joyiga bosilganda bizning blokimiz yashirinadigan qilaylik:

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

Biroq, bizni kutilmagan sirli hodisa kutmoqda: tugma ota-ishchi ichida joylashgani sababli, tugmacha bosish bir vaqtning o'zida ota-ishchiga bosish demakdir. Bu shuni anglatadiki, dastlab bizning blokimiz ko'rinadi, keyin esa hodisaning o'tarishi tufayli ota-ishchidagi ishlovchi ishga tushadi va bizning blokimiz yashirinadi.

Mana shu yerda oʻtarishni bekor qilish imkoniyati bizga kerak bo'ladi: biz tugmacha bosilganda oʻtarishni bekor qilishni ta'minlashimiz mumkin, shunda ota-ishchi ushbu bosishga javob bermaydi.

Tasvirlangan vazifaning to'g'ri ishlashini mustaqil ravishda amalga oshiring.