EventListenerを別のイベントリストに追加するときにRemoveEventListenerが機能しない

Question

私は自分のカラーピッカーホイールをJavascriptで実行しようとしています。小さな円をドラッグして色を選択できるようにしたいのです（ "+" ）またはホイールのどこかをクリックして（小さな円をドラッグすることなく、小さな円をその位置に移動する必要があります）。またマウスボタン（mouseup）を離すまで、ホイールのどこかにマウスを置いた後（mousedownイベントが発生したとき）、小さな円をドラッグすることができます。 HERE

：私が視覚的に欲しいものをここに見ることがはるかに簡単です： https://jsfiddle.net/s1qesLp9/1/

あなたのコメントを解除行78場合、あなたは問題が何であるかを見ることができます。

問題は、eventListenersを追加して削除するとき（私が上記をすべて実行したいので、mousedown、mousemove、mouseupを使用しているので）、mousedownごとに警告数が1増加する（私はただ一つの警報がここに必要です、車輪にいくつのマウスハウスがあるのか​​とは無関係です！）。私はそれがドキュメントオブジェクトと関係しなければならないか、またはeventListenersを削除することに何か問題があると思っていましたが、わかりません。

は、ここで私はとの問題を抱えている部分が来る：あなたはすべてのマウスダウン後のmouseUpするための新しいリスナーを追加し、それを削除することはありませんしているので

document.getElementById('wheel').addEventListener('mousedown', function(e) { 
    targetMove(e); 
    document.addEventListener('mousemove', targetMove); 
    document.addEventListener('mouseup', function() { 
     document.removeEventListener('mousemove', targetMove); 
     document.onmouseup = null; 
     alert("Here is the problem: For every mousedown on the wheel, the 
     number of alerts is increased by 1 (I only want one alert here!)"); 
    }); 
}, false); 

Answer 1

私はそれを解決しました！代わりにこれを持っていることの

：

document.addEventListener('mouseup', function() { 
    document.removeEventListener('mousemove', targetMove); 
    document.onmouseup = null; 
    alert("Here is the problem: For every mousedown on the wheel, the number 
of alerts is increased by 1 (I only want one alert here!)"); 
}); 

私はこれを持っている：

document.onmouseup = function() { 
    document.removeEventListener('mousemove', targetMove); 
    document.onmouseup = null; 
    alert("Problem is solved"); 
}; 

だから、問題はのmouseup上のメソッドは、addEventListenerを使用していたとdocument.onmouseupに機能を与えることによって置き換えられます代わりに。

とにかくお手伝いをしてくれてありがとう！

Answer 2

にです。名前付き関数を移動して追加する前に削除を呼び出すことができます。存在しないリスナーを削除しても、私が気づいている問題はありません。

< --edit - >これは、アクションごとにフラグを設定すると、これはおそらく論理の立場から見て分かりやすいでしょう。だからあなたはターゲットを移動してmouseheldをtrueに設定します。マウスを動かしてターゲットを動かすと、mousemoveに表示されます。最後にonmouseup、mouseheldをfalseに設定します。 < --edit - />

document.getElementById('wheel').addEventListener('mousedown', function(e) { 
 
    targetMove(e); 
 
    document.addEventListener('mousemove', targetMove); 
 
    
 
    //This listener is getting added with every mousedown and is never removed 
 
    document.addEventListener('mouseup', function() { 
 
     document.removeEventListener('mousemove', targetMove); 
 
     document.onmouseup = null; 
 
     alert("Here is the problem: For every mousedown on the wheel, the 
 
     number of alerts is increased by 1 (I only want one alert here!)"); 
 
    }); 
 
}, false);

Answer 3

mousedownイベントのイベントリスナーは、各mousedownに再び同じイベントリスナーを追加しています。これらのイベントリスナーをコールバック関数から削除して別々に追加すると、この問題は発生しません。

document.getElementById('wheel').addEventListener('mousedown', function(e) { 
    targetMove(e); 
}, false); 

document.addEventListener('mousemove', targetMove); 
document.addEventListener('mouseup', function() { 
    document.removeEventListener('mousemove', targetMove); 
    document.onmouseup = null; 
    alert("Problem solved! You are binding this event listener only once."); 
    }); 

ここjsFiddleです。