javascript - 无法删除 Javascript 对象中设置的事件监听器

Question

我正在尝试用纯 javascript(无库)创建 slider (例如: http://jqueryui.com/slider/ )，但在操作 addEventListener/removeEventListener 时遇到问题因为我期待着他们。基本上，我一直遇到一个问题，当我深入到 mouseup 监听器时，我失去了 mousemove 监听器对象的范围，并且无法删除 mousemove 事件监听器并停止拖动过程。

我还尝试创建一个带有 EventListener 接口(interface)的对象(例如，如下所述: http://ajaxian.com/archives/an-alternative-way-to-addeventlistener )，但遇到了同样的问题。如果可能的话，我真的很想走这条路。

一些代码怎么样？这是 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>

我尝试了许多不同的方法 - 原型(prototype)方法、单例函数、内部方法(例如上面的方法)，但在所有这些情况下，当我沿着 this.addEventListener('mousedown', this.mouseDown, false); 我失去了 mouseDown 中 this 对象的范围。我使用 bind() 来传递值 – this.addEventListener('mousedown', this.mouseDown.bind(null, this), false); 到传递 DOM 对象，同时将事件参数保留在 mouseDrag 中。凉爽的!除了在这些情况下，我一直无法删除事件监听器。唯一的异常(exception)是，如果我通过 this.elem.addEventListener... 设置 mousemove 事件监听器，但在本例中是我的 mousemove函数仅在光标在对象上方移动时运行，而不是在文档中的任何位置移动，这是所需的行为。

我可以在一堆独立函数中使用全局变量来引用附加事件来执行此操作，但我正在尝试学习在对象内执行此操作。

Answer 1

使用绑定(bind)。您有 2 个选择:

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

像这样:

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