Question

情况：我有一个项目的事件监听器。当我按下它时，它会调用一个执行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;

}

Answer 1

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

E.g：

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);
    }
};

Javascript：无法删除webkitAnimationEnd的侦听器

1 个答案: