Question

所以根据MDN（这是有意义的）AnimationEvent有bubble参数但是怎么能把它设置为真？考虑事件是从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()，这会绑定到特定的选择器，而不是听泡沫事件（我认为）。

冒泡CSS动画事件

1 个答案: