removeEventListenerが機能しないのはなぜですか？

Question

私はユーザーのクリックが青いボタンか赤いボタンのいずれかである単純なスクリプトの作成に取り組んでいます。青いボタンがクリックされると、ユーザーがクリックすると消えてしまい、うまくいきます。しかし、ユーザーが赤いボタンをクリックすると、青色のフェードアウトが停止します。私が言ったように、青のボタンは動作しますが、赤のボタンは動作しません。

ここや他のサイトのさまざまな質問と回答を見ると、私が持っているコードは正しいと思うし、それがうまくいかない理由は一致しない、つまり実際にはイベントを追加します。

私が持っているコードは以下であり、任意の助けいただければ幸い、私は内のコードには、Adobeアニメーションを使用しています：あなたは2つの選択肢を持っている要素の削除イベントリスナーのために

instance = this; 
instance.stop(); 

//Buttons array 
var lowerQuestions = [instance.BTN1, instance.BTN2, instance.BTN4]; 

//Add an event listener to each button in the array 
addEventListeners(); 
function addEventListeners(){ 
    lowerQuestions.forEach(function(element) { 
     element.addEventListener("click", function(){ 
      console.log('add listener'); 
      addButtonValue(element); 
     },false); 
    }); 
} 

//Remove event listeners when BTN3 is clicked 
instance.BTN3.addEventListener("click", removeEventListeners) 

function removeEventListeners(){ 
    console.log('prevent'); 

    lowerQuestions.forEach(function(element) { 
     element.removeEventListener("click", function(){ 
      console.log('remove listener'); 
       addButtonValue(element); 
      //console.log('hit me here'); 
      },false); 
    }); 

} 

//Event listener function 
function addButtonValue(element){ 
instance.addEventListener("tick", fadeOut); 
element.alpha = 1; 
    function fadeOut(){ 
     element.alpha -= 0.15; 
     if(element.alpha <= 0){ 
      instance.removeEventListener("tick", fadeOut);} 
     } 
} 

Answer 1

。 1-要素のコピーを作成し、これを置き換えます。 2 - リスナー関数の名前を入れ、それを渡してイベントリスナを削除します。 あなたのコードで私は最初の解決策を提案します。あなたはリスナーを削除したいすべての単一の要素がこのコードを実行する必要があるため、このコードでは、あなたを助けることができる：匿名関数式を削除する必要があるイベントリスナーのための素晴らしいではありませんなぜ

function removeEventListeners(){ 
    console.log('prevent'); 

    lowerQuestions.forEach(function(element) { 
     var cln = element.cloneNode(true); 
     element.parentNode.appendChild(cln); 
     element.parentNode.removeChild(element); 
    }); 
} 

Answer 2

Are anonymous functions able to handle removeEventListener?は議論 - 関数式は異なっを生成しますそれらが実行されるたびに削除されるので、remove関数は追加された関数と決して一致しません。

function buttonClicked(){ 
    addButtonValue(this); 
} 
addEventListeners(); 
function addEventListeners(){ 
    lowerQuestions.forEach(function(element) { 
     element.addEventListener("click", buttonClicked, false); 
    }); 
} 

名前で取り外し可能なリスナーを作る：

//... 

lowerQuestions.forEach(function(element) { 
    element.removeEventListener("click", buttonClicked, false); 
}); 

//... 

の