RemoveEventListener在另一个内部添加EventListener时不起作用

Question

我正在尝试使用Javascript自己的颜色拾取器轮，我希望能够通过拖动一个小圆圈（内部带有“+”符号）来选择颜色）或通过点击轮子上的某处（不拖动小圆圈，但小圆圈必须到达该位置）。另外，我希望能够在按下轮子上的某个位置（当触发mousedown事件时）之后拖动小圆圈，直到释放鼠标按钮（mouseup）。

的位置：它是在这里看到了我想要在视觉上容易得多： https://jsfiddle.net/s1qesLp9/1/

如果您取消注释行78，然后就可以看到的问题是什么。

问题是，当我使用添加和删除eventListeners（因为我想要完成上述操作，我使用mousedown，mousemove和mouseup）我得到这样的警报数量为每mousedown增加1在车轮上（我只需要一个警戒，独立于车轮上的多少mousedowns！）。我在想如果它与文档对象有关，或者如果删除eventListeners有问题，但我不确定。

这里来，我有问题的一部分：

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

所以，问题是使用方法的addEventListener上mouseup和被赋予的功能的document.onmouseup更换代替。

感谢您试图帮助！

Answer 2

这是因为你要添加的新侦听每次鼠标按下后鼠标松开，永不删除。你可以移动它做一个指定的函数，并在添加之前调用remove。删除不存在的侦听器不会导致我意识到的任何问题。

< --edit - >我应该提到，如果您为每个操作设置标志，从逻辑角度来看，这可能会更容易。所以在mousedown你会移动目标并将鼠标设置为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。