当转换结束于div时转发的webkitTransitionEnd事件AND转换在所有CHILD div上结束？

Question

所有,

我的情况看起来大致如下:

我的HTML页面包含div(我称之为"parentDiv"),我正在进行转换.当转换结束时,它应该调用"onTransitionEndParent"

parentDiv包含一个div(我称之为"childDiv"),我正在执行不同的转换.当转换结束时,它应该调用"onTransitionEndChild".

所以,我的代码大致如下:

parentDiv.addEventListener("webkitTransitionEnd", onTransitionEndParent, false);
childDiv.addEventListener("webkitTransitionEnd", onTransitionEndChild, false);

我发现的问题......

当parentDiv的转换结束(正确)时,将调用onTransitionEndParent.然而,它的另调用时childDiv过渡端(不出我所料...)

换一种说法...

• 当childDiv的转换结束时,将调用onTransitionEndChild
• 当parentDiv的转换结束时,调用onTransitionEndParent ,当childDiv的转换结束时,调用AGAIN

这是正确的行为,还是我做错了什么？

有没有办法确保onDnsitionEndParent仅在parentDiv的转换结束时被调用,而不是当它的任何子div的转换结束时？

提前谢谢了.

Answer 1

transitionEnd 所谓的冒泡事件,从孩子到其父母被派遣(冒泡).

你的选择:

1. 分析event.target事件对象的属性 - 它应该包含已结束转换的元素.
2. 或者在每个子元素上安装transitionEnd事件处理程序并调用 event.stopPropagation()以防止其冒泡.