TransitionEnd listener firing on child elements

Question

I added a transitionend event listener to a div. This div has children who have transition on some elements. I want the transitionend event to only fire for the element I added it for, is this a bug? or expected behavior? How to make it fire only if its the one i added the listener to?

Answer 1

Events are bubbling by default, meaning that they will be "transmitted" to the parent element until they hit the body or a handler that will stop them.

You can either :

• Filter by the event's target being sure it's the element you're targetting.
• Listening to the event on children and event.stopPropagation() on them. That way, they won't bubble through the parent anymore.

If you'd show us some code, it would be easier to help you, depending on your current implementation.

Answer 2

This process is called as Event Bubbling.The thing you can do is either detect the bubbling using the event handler or prevent the bubbling by stopping the propogation. You can do this by

event.stopPropagation()

In IE beofore 9.

You can do it as

window.event.cancelBubble = true;

Please have a detailed look here