在Javascript中删除对象中的事件侦听器集时出现问题

我正试图在纯javascript（无库）中创建一个滑块（例如：），但在使

addEventListener

/

removeEventListener

按预期运行时遇到问题。基本上，我一直遇到这样一个问题：当我深入到

mouseup

监听器时，我丢失了

mousemove

监听器对象的范围，并且无法删除

mousemove

事件监听器并停止拖动过程

我还尝试创建一个带有EventListener接口的对象（例如，如下所述：），但遇到了相同的问题。如果可能的话，我真的很想走那条路

代码怎么样。以下是HTML：

<div class="slider">
  <div class="slider-bar"></div>
  <div id="slider-1" class="slider-ball"></div>
</div>

下面是一些javascript的示例：

<script type="text/javascript">
function Slider(elem) {
  this.elem = elem;

  this.listen = function() {
    this.elem.addEventListener('mousedown', this.mouseDown, false);
    document.addEventListener('mouseup', this.mouseUp, false);
  }

  this.mouseDown = function(e) {
    e.stopPropagation();
    document.addEventListener('mousemove', this.mouseDrag, false);
  }

  this.mouseUp = function() {
    document.removeEventListener('mousemove', this.mouseDrag, false);
  }

  this.mouseDrag = function(e) {
    // code to move the slider-ball on its X axis.
  }
}

newSlider = new Slider(document.getElementById('slider-1'));
newSlider.listen();
</script>

功能滑块（elem）{
this.elem=elem；
this.listen=函数（）{
this.elem.addEventListener（'mousedown'，this.mousedown，false）；
document.addEventListener（'mouseup'，this.mouseup，false）；
}
this.mouseDown=函数（e）{
e、 停止传播（）；
document.addEventListener（'mousemove'，this.mouseDrag，false）；
}
this.mouseUp=函数（）{
document.removeEventListener（'mousemove'，this.mouseDrag，false）；
}
this.mouseDrag=函数（e）{
//在滑块球的X轴上移动滑块球的代码。
}
}
newSlider=newSlider（document.getElementById（'Slider-1'）；
听一听；

我尝试过许多不同的方法——原型方法、单例函数、内部方法（如上文所述），但在所有这些情况下，当我按照this.addEventListener（'mousedown'，this.mousedown，false）的思路运行某些东西时我在

mouseDown

中丢失了

此

对象的范围。我使用了

bind（）

传递值–

this.addEventListener（'mousedown'，this.mousedown.bind（null，this），false）

传递DOM对象，同时将事件参数保留在

mouseDrag

中。酷！除此之外，我一直无法删除事件侦听器。唯一的例外是，如果我通过

this.elem.addEventListener…

设置

mousemove

事件侦听器，但在这种情况下，我的

mousemove

函数仅在光标在对象上移动时运行，而不是在文档中的任何位置，这是所需的行为

我可以在一组独立函数中使用全局变量来引用附加的事件，但我正在尝试在对象中实现这一点。

使用bind。 您有两个选择：

• 当您附加事件时
• 当您将函数附加到此

像这样：

function Slider(elem) {
  this.elem = elem;

  this.listen = function() {
    this.elem.addEventListener('mousedown', this.mouseDown.bind(this), false);
    document.addEventListener('mouseup', this.mouseUp.bind(this), false);
  }

  this.mouseDown = function(e) {
    e.stopPropagation();
    document.addEventListener('mousemove', this.mouseDrag, false);
  }

  this.mouseUp = function() {
    document.removeEventListener('mousemove', this.mouseDrag, false);
  }

  this.mouseDrag = function(e) {
    // code to move the slider-ball on its X axis.
  }.bind(this);
}

---

这其中的一个可能是有用的，这太完美了！我没有意识到我可以像那样将

bind

附加到函数定义。我需要仔细阅读这篇文章。谢谢。如果您需要与旧浏览器兼容，请使用mozilla polify：您知道使用addEventListener/bind在IE中可以走多远吗？我想是IE9+。