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

თუმცა, ჩვენ გველოდება მოულოდნელი სიურპრიზი: რადგან ღილაკი მდებარეობს მშობლის შიგნით, ღილაკზე დაჭერა ერთდროულად ნიშნავს მშობელზე დაჭერასაც. ეს ნიშნავს, რომ ჯერ ჩვენი ბლოკი გამოჩნდება, შემდეგ კი მოვლენის ამოდიობის გამო სამუშაოდ ჩართვება მშობლის დამმუშავებელი და ჩვენი ბლოკი დაიმალება.

სწორედ აქ გამოგვადგება ამოდიობის გაუქმების შესაძლებლობა: ჩვენ შეგვიძლია გავაკეთოთ ისე, რომ ღილაკზე დაჭერისას გაუქმდეს ამოდიობა, მშობელი კი არ რეაგირებდეს ამ დაჭერაზე.

დამოუკიდებლად რეალიზაცია გაუკეთეთ აღწერილი ამოცანის კორექტულ მუშაობას.