javascript - Android浏览器难以停止无限CSS动画

Question

我在 Android 4.x 浏览器/ WebView 中停止或暂停动画时运气不佳。我将 -webkit-animation-iteration-count 设置为无限，在 Chrome/Safari 中停止它没有问题，但如果元素有动画子元素，它在 Android 中会失败。

我的 HTML:

<div id="css-container" onclick="stopAnim();">
    <div id="content">Content</div>
</div>

我的JS:

function stopAnim() {
    // cssContent.classList.toggle('css-container-anim');
    cssContainer.classList.toggle('css-container-anim');
}

var cssContainer = document.getElementById("css-container");
var cssContent= document.getElementById("content");

cssContainer.classList.toggle('css-container-anim');
cssContent.classList.toggle('css-container-anim');

您可以在这个 fiddle 中看到问题.如果我取消注释内容的停止(删除动画类)，那么我可以停止动画。

我想这可能是我无法理解的冒泡问题？或者它是一个 Android 错误？我也尝试过直接通过 JS 操纵样式，并将 webkitAnimationPlayState 设置为暂停而不是更改类，但这没有任何改变。

请注意，fiddle 在 Android 上的 Chrome 中有效，但不适用于标准浏览器 - 由于 webview，我需要它。

Answer 1

我找不到任何来源来证实这一点，但我相信 div 可能不会发送 onclick触摸设备的事件。我在 http://jsfiddle.net/f2XaP/4/ 中创建了一个测试我在哪里处理 <a> 的 onclick它似乎适用于我的 iPhone。