6

I bound a transitionend event to div1. When div1's transition was end, the event ran. There's no problem.

I encountered a special case:

I added 3 paragraphs to this div1, when each paragraph's transition is ended, div1's transitionend event also ran. So the transitionend event ran 4 times. >.<

In div1's transitionend event's listener function's body, I can see that event.target !== this. I feel it's pretty ridiculous!

Chrome and Firefox both has this problem. So I guess this is not a browser's HTML5 spec implementation bug.

Can anyone explain why an element's transitionend event also can be triggered by this element's children element?

Thank you.

weilou
  • 4,419
  • 10
  • 43
  • 56
  • I can't get this problem's reproduction codes. But I can sure that I see the 'event.target !== this' in `transitionend` event's listener function's body. I can't understand this strange issue. Do you think this is a bug of both Chrome and Firefox? – weilou Aug 18 '12 at 21:26

1 Answers1

12

This is called event bubbling. Many events occuring on a child element will, by default, bubble up through the parents after the event handler is called on the originating object. You can either detect bubbling as you've noticed by examining theevent object or you can prevent bubbling by stopping the propagation when you handle the event on the source object.

Stopping propagation is one of those things that is different in IE vs. other browsers. In other browsers, you call:

event.stopPropagation()

In IE before IE9:

window.event.cancelBubble = true;
jfriend00
  • 683,504
  • 96
  • 985
  • 979
  • 1
    Thank you for your answer. Firstly, I think `transitionend` event should be a special one. It shouldn't be added to the event bubbling chain. So W3C should improve their HTML5 `transitionend` event's spec. Secondly, I really don't bind `transitionend` event to 3 paragraphs. So... It appears that it's a bug of Chrome and Firefox's HTML5 spec implementation bug? I only set `transition` to 3 paragraphs. – weilou Aug 18 '12 at 21:41
  • 4
    @WeiLou - lots of events bubble (clicks, keys, etc...). It's the way thnigs work in a browser so `transitionend` is not different than other events. You just need to know that now and code for it. If you want to know if the event belongs to this particular object, then just look at `event.target` to see if it matches your object or if it's some other object. Bubbling can be very, very useful in some circumstances. – jfriend00 Aug 18 '12 at 21:46