Az eseménybuborékolás megállításának alkalmazása JavaScriptben

Tegyük fel, hogy egy szülőn belül van egy gomb és egy bizonyos blokk:

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

Kapjuk meg az elemekre mutató hivatkozásokat változókba:

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

Tegyük fel, hogy a blokkunk eredetileg rejtett:

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

Tegyük úgy, hogy a gombra kattintáskor a blokkunk megjelenjen:

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

Most pedig tegyük úgy, hogy a szülő bármely pontjára kattintáskor a blokkunk elrejtődjön:

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

Azonban váratlan meglepetés ér minket: mivel a gomb a szülőn belül van, a gombra kattintás egyben a szülőre kattintást is jelenti. Ez azt jelenti, hogy először a blokkunk megjelenik, majd az esemény buborékolása miatt a szülőben lévő kezelő aktiválódik, és a blokkunk elrejtődzik.

Itt jön jól a buborékolás megállításának lehetősége: elérhetjük, hogy a gombra kattintáskor a buborékolást megállítva, a szülő ne reagáljon erre a kattintásra.