0

情况：我在一个项目上有一个事件监听器。当我按下它时，它会调用一个执行 webkitAnimation 的方法，结果我返回动画的结尾。

问题：如果我在我的项目上单击几次，webkit 动画的侦听器没有重置，所以我收到很多回调..

我尝试使用 removeEventListener 但它不起作用..

提前致谢！

var Test = (function () {

function Test(listItem) {
    this.listItem = listItem;
    listItem.addEventListener('click', function(event) {
        this.startAnim(function() {
        });
    }
}
Test.prototype.startAnim = function(callback) {
    this.listItem.style.webkitAnimationName = 'simpleAnim';
    this.listItem.style.webkitAnimationDuration = '220ms';

    this.listItem.addEventListener('webkitAnimationEnd', function() {
        this.style.webkitAnimationName = '';

        // This calls my callback too many times..
        callback();

        // the following doesn't work!
        this.removeEventListener('webkitAnimationEnd', function() {
            // this doesn't work....
        }, false);
    }, false);

};
return Test;

}

4

1 回答 1

2

您必须删除您添加的相同功能；浏览器无法猜测您要删除的功能（因为可以添加许多功能）。您正在删除在不同时间创建的两个不同功能，所以它当然不起作用。记住对您添加的函数的引用，然后删除该函数。

例如：

Test.prototype.startAnim = function(callback) {
    this.listItem.style.webkitAnimationName = 'simpleAnim';
    this.listItem.style.webkitAnimationDuration = '220ms';

    // Add a specific function
    this.listItem.addEventListener('webkitAnimationEnd', animationEndHandler, false);

    function animationEndHandler() {
        this.style.webkitAnimationName = '';

        // This calls my callback too many times..
        callback();

        // Remove the same specific function
        this.removeEventListener('webkitAnimationEnd', animationEndHandler, false);
    }
};
于 2013-10-12T21:35:30.593 回答