Իրադարձությունների բաբլյուխի դադարեցման կիրառումը JavaScript-ում

Ենթադրենք՝ մի ծնողի ներսում ունենք կոճակ և որոշակի բլոկ.

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

Ստացենք մեր էլեմենտների հղումները փոփոխականների մեջ.

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

Ենթադրենք՝ մեր բլոկը սկզբում թաքնված է.

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

Եկեք անենք այնպես, որ կոճակի վրա կտտացնելիս մեր բլոկը ցուցադրվի.

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

Իսկ հիմա եկեք անենք այնպես, որ ծնողի ցանկացած տեղում կտտացնելիս մեր բլոկը թաքնվի.

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

Սակայն մեզ անսպասելի անակնկալ է սպասում. քանի որ կոճակը գտնվում է ծնողի ներսում, ապա կոճակի վրա կտտացնելը միաժամանակ նշանակում է նաև կտտոց ծնողի վրա: Սա նշանակում է, որ սկզբում մեր բլոկը կցուցադրվի, ապա՝ իրադարձության բաբլյուխի պատճառով, կգործարկվի ծնողի մշակիչը և մեր բլոկը կթաքնվի:

Ահա այստեղ է, որ մեզ օգտակար է բաբլյուխը դադարեցնելու հնարավորությունը. մենք կարող ենք անել այնպես, որ կոճակի վրա կտտացնելիս դադարեցնել բաբլյուխը, և ծնողը չարձագանքի այս կտտոցին: