events - 冒泡 CSS 动画事件

Question

所以根据MDN (这是有道理的)AnimationEvent 有 bubble 参数，但是如何将它设置为 true？考虑到该事件是从 CSS 动画触发的。

Answer 1

好吧，原来CSS是做冒泡事件的，例如:

HTML:

<ul id="ul">
    <li>
        <a id="a">Some text!</a>
    </li>
</ul>

CSS:

a
{
    color: red;
}
a:hover
{
    -webkit-animation-duration: 1s;  
    -webkit-animation-name: change-color;
} 

@-webkit-keyframes change-color {  
    from 
    {  
        color: red;
    }  

    to 
    {  
        color: blue;
    }  
}

JS:

var a   = document.getElementById( 'a' );
var ul  = document.getElementById( 'ul' );

a.addEventListener( 'webkitAnimationEnd', handleEnd );
ul.addEventListener( 'webkitAnimationEnd', handleEnd );

function handleEnd(e)
{
    console.log(e);
}

您会看到触发了两个事件。我遇到的问题是我使用的是 jQuery 的 bind() 并且它绑定(bind)到一个特定的选择器而不是监听冒泡事件(我认为)。