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

追加した同じ関数を削除する必要があります。ブラウザーは、削除する機能を推測できません (多くの機能が追加される可能性があるため)。異なる時期に作成された 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 に答える