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