Tapahtumien kuplimisen lopettaminen JavaScriptissä

Tapahtuman kuplimisen voi pysäyttää missä tahansa elementissä, jonka läpi tapahtuma kuplii. Tätä varten elementin koodissa tulee kutsua Event-olion metodia stopPropagation.

Seuraavassa esimerkissä punaiseen lohkoon klikkaaminen toimii itsessään, sitten siniseen lohkoon ja siihen se päättyy - sininen lohko lopettaa lisäkuplimisen ja vihreä lohko ei reagoi mitenkään:

javascriptelem1.addEventListener('click', function() {
  console.log('vihreä');
});
elem2.addEventListener('click', function(event) {
  console.log('sininen');
  event.stopPropagation(); // pysäytetään kupliminen
});
elem3.addEventListener('click', function() {
  console.log('punainen');
});

Voit testata: