Įvykių plitimo sustabdymo taikymas JavaScript

Tarkime, kad vieno tėvinio elemento viduje turime mygtuką ir tam tikrą bloką:

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

Gaukime nuorodas į mūsų elementus kintamuosiuose:

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

Tarkime, kad mūsų blokas iš pradžių yra paslėptas:

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

Padarykime taip, kad paspaudus ant mygtuką mūsų blokas būtų rodomas:

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

O dabar padarykime taip, kad paspaudus bet kur tėvinio elemento vietoje mūsų blokas būtų paslėptas:

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

Tačiau mūsų laukia netikėta staigmena: kadangi mygtukas yra tėvinio elemento viduje, tai paspaudimas ant mygtuko tuo pačiu reiškia ir paspaudimą ant tėvinio elemento. Tai reiškia, kad iš pradžių mūsų blokas bus rodomas, o vėliau dėl įvykio plitimo suveiks tėvinio elemento doroklis ir mūsų blokas bus paslėptas.

Štai čia mums ir pravers galimybė sustabdyti plitimą: mes galime padaryti taip, kad kai spaudžiama ant mygtuko, būtų sustabdomas plitimas, tėvinis elementas nereaguotų į šį paspaudimą.