JavaScript-də Hadisə Qalxmasının Dayandırılmasının Tətbiqi

Tutaq ki, bir valideynin daxilində bir düyməmiz və müəyyən bir blokumuz var:

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

Elementlərimizə istinadları dəyişənlərə əldə edək:

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

Tutaq ki, bizim blok ilkin olaraq gizlidir:

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

Elə edək ki, düyməyə klik edəndə bizim blok görünsün:

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

İndi isə elə edək ki, valideynin istənilən yerinə klik edəndə bizim blok gizlinsin:

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

Lakin bizi gözlənilməz bir sürpriz gözləyir: düymə valideynin daxilində yerləşdiyi üçün düyməyə klik eyni zamanda valideynə də klik etmək deməkdir. Bu o deməkdir ki, əvvəlcə bizim blok görünəcək, sonra isə hadisənin qalxması səbəbindən valideyndəki işləyici aktiv olacaq və bizim blok gizlədiləcək.

Bax elə burada qalxmanın ləğv edilməsi imkanı bizə lazım olacaq: biz elə edə bilərik ki, düyməyə klik edəndə qalxma ləğv edilsin, valideyn bu klikə reaksiya verməsin.

Təsvir olunan tapşırığın düzgün işləməsini özünüz həyata keçirin.