Javascript：无法删除webkitAnimationEnd的侦听器

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

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

例如为：

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