Why are the event handlers fired twice?

Question

If I collapse or expand "id-1" then the handlers work correctly.

If I collapse or expand "id-1-1" then two handlers are triggered: one for "id-1" and the second for "id-1-1".

Why is the event fired for "id-1" even though no action is taking place?

const myCollapsible = document.querySelectorAll('.collapse');
myCollapsible.forEach(myOne => {
    myOne.addEventListener('shown.bs.collapse', function() {
        console.log('shown ' + this.id);
    });
    myOne.addEventListener('hidden.bs.collapse', function() {
        console.log('hidden ' + this.id);
    });
});

Yogen Darji · Accepted Answer

You need to e.stopPropagation() from your child to top level parent.

You can find more on stopPropagation

const myCollapsible = document.querySelectorAll('.collapse');
myCollapsible.forEach(myOne => {
  myOne.addEventListener('shown.bs.collapse', function(e) {
    e.stopPropagation();
    console.log('shown ' + this.id);

  });
  myOne.addEventListener('hidden.bs.collapse', function(e) {
    e.stopPropagation();
    console.log('hidden ' + this.id);

  });
});

Why are the event handlers fired twice?

Answers (1)

Related Questions