Javascript 在另一个EventListener中添加EventListener时，RemoveEventListener不工作

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

这里：在这里更容易直观地看到我想要的东西：

如果取消注释第78行，则可以看到问题所在

问题是，当我使用add和remove eventListeners时（因为我想做上述所有工作，所以我使用mousedown、mousemove和mouseup），控制盘上的每个mousedown都会增加1个警报（我这里只需要一个警报，与控制盘上的mousedown数量无关！）。我在想它是否与document对象有关，或者删除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);

---

这是因为在每次鼠标下移之后，您都会向mouseup添加一个新的侦听器，并且从不删除它。您可以在添加之前，通过命名函数移动并调用remove。删除一个不存在的侦听器不会导致我所知道的任何问题

我应该提到，如果为每个操作设置标志，从逻辑角度来看，这可能会更容易。所以在mousedown中，您将移动目标并将mouseheld设置为true。然后在mousemove上，如果mouseheld移动目标。最后，在mouseUp上，将mouseheld设置为false

document.getElementById（'wheel'）.addEventListener（'mousedown'，函数（e）{
targetMove（e）；
文件。添加的文件列表器（“mousemove”，targetMove）；
//每次鼠标向下移动时，都会添加此侦听器，并且不会将其删除
document.addEventListener（'mouseup'，function（）{
document.removeEventListener（'mousemove'，targetMove）；
document.onmouseup=null；
警告（“问题是：对于方向盘上的每一个鼠标向下移动
警报数量增加1（我这里只需要一个警报！）；
});
}，假）

您的

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

这里有一个问题。

我已经解决了

而不是这样：

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提供一个函数

---

无论如何，谢谢你的帮助

谢谢你的回答！这样做的问题是有些功能消失了。正如您在上面提供的链接上所看到的，您可以单击控制盘上的某个位置并拖动小圆，但也可以在按下控制盘上的某个位置后拖动小圆，直到松开鼠标按钮。是的，您的解决方案只会收到一个警报，但我还希望小圆具有所有功能（代码中唯一不能执行的功能是在按下控制盘上的某个位置后拖动小圆（在开始时不拖动小圆），当松开鼠标按钮时，小圆将停留在那里）。如果您将我的链接与您的链接进行比较，您会注意到我的意思。我不太确定您设置标志的意思。是否也可以使用代码显示，因为这样更容易理解。请随意更改提供的代码中的代码：）您说我从未将侦听器删除到鼠标，我是否删除了侦听器（mouseup和mousemove）通过函数（）中的以下代码：document.removeEventListener（'mousemove'，targetMove）；document.onmouseup=null；就我而言，删除侦听器可以通过：document.onmouseup=null或document.removeEventListener完成（'mouseup'，targetMove）。我尝试了这两种方法，但都没有找到任何解决方案，一切都能正常工作。