Question

我正在尝试在纯javascript（无库）中创建一个滑块（例如：http://jqueryui.com/slider/），但我无法让addEventListener / removeEventListener像我一样操作期待他们。基本上，我继续遇到一个问题，当我向下钻取mousemove侦听器时，我失去了mouseup侦听器对象的范围，并且无法删除mousemove事件侦听器并停止拖动过程。

我还尝试使用EventListener接口创建一个对象（例如，如此处所述：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>

我尝试了很多不同的方法 - 原型方法，单例函数，内部方法（例如上面的方法），但在所有这些情况下，当我按照this.addEventListener('mousedown', this.mouseDown, false);的方式运行时，我失去了{this的范围。 {1}} mouseDown中的对象。我已使用bind()传递值 - this.addEventListener('mousedown', this.mouseDown.bind(null, this), false);以传递DOM对象，同时将事件参数保留在mouseDrag中。凉！除了那些情况，我一直无法删除事件监听器。唯一的例外是，如果我通过mousemove设置this.elem.addEventListener...事件监听器，但在这种情况下，我的mousemove函数仅在光标在对象上移动而不在任何位置时运行文件，这是期望的行为。

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

Answer 1

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

无法在Javascript中删除对象中设置的事件侦听器

1 个答案: