Истифодаи бекор кардани нушидани рӯйдодҳо дар 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');
});

Аммо, моро сирпризи ногаҳонӣ интизор аст: зеро ки тугма дохили волидайн қарор дорад, пас клик кардан рӯи тугма ҳамзамон ба маънои клик кардан рӯи волидайн аст. Ин ба ин маъност, ки аввал блоки мо намоиш дода мешавад, ва сипас аз сабаби нушидани рӯйдод коркунаки волидайн фаъол шуда ва блоки мо пинҳон мешавад.

Дар ин ҷост, ки имконияти бекор кардани нушидан ба кор мо меояд: мо метавонем тавре кунем, ки ҳангоми клик кардан рӯи тугма нушидани рӯйдод бекор карда шавад, волидайн ба ин клик реаксия нанишонад.

Коркарди дурусти вазифаи тавсифшударо худ ба таври мустақил амалӣ кунед.