JavaScript'te Olay Kabarcıklanmasının Durdurulmasının Uygulanması

Bir ebeveynin içinde bir düğme ve bir blok olduğunu varsayalım:

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

Elementlerimize referansları değişkenlere alalım:

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

Bloğumuzun başlangıçta gizli olduğunu varsayalım:

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

Düğmeye tıklandığında bloğumuzun görünmesini sağlayalım:

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

Şimdi de ebeveynde herhangi bir yere tıklandığında bloğumuzun gizlenmesini sağlayalım:

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

Ancak, beklenmedik bir sürpriz bizi bekliyor: düğme ebeveynin içinde olduğu için, düğmeye tıklamak aynı zamanda ebeveyne tıklamak anlamına gelir. Bu, önce bloğumuzun görüneceği, ancak ardından olayın kabarcıklanması nedeniyle ebeveyndeki işleyicinin çalışacağı ve bloğumuzun tekrar gizleneceği anlamına gelir.

İşte burada, kabarcıklanmayı iptal etme özelliği işimize yarar: düğmeye tıklandığında kabarcıklanmayı durduracak şekilde yapabiliriz, böylece ebeveyn bu tıklamaya tepki vermez.

Açıklanan görevin doğru çalışmasını kendiniz uygulayın.