15

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?

Noitidart
  • 35,443
  • 37
  • 154
  • 323

2 Answers2

26

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.

Yoann
  • 3,020
  • 1
  • 24
  • 34
6

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

Community
  • 1
  • 1
Avinash Babu
  • 6,171
  • 3
  • 21
  • 26
  • 1
    Please don't mind but I accepted the other guys answer as he posted first. But your IE9 info and explanation is very much appreciated. – Noitidart Oct 11 '14 at 03:41
  • 3
    it okay man ..it doesnt matter about accepting the answer ..the matter is wheather if its helped you or not and am glad it helped you ..:) Cheers..Hapy coding – Avinash Babu Oct 11 '14 at 03:43