[SOLVED] Why does animating child elements trigger the parent's transitionend event?

Why does animating child elements trigger the parent's transitionend event?

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.

Solution

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;