0

我正在尝试在纯 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了mouseDown. 我过去常常bind()传递值——this.addEventListener('mousedown', this.mouseDown.bind(null, this), false);传递 DOM 对象，同时将事件参数保存在mouseDrag. 凉爽的！除了在那些情况下，我一直无法删除事件侦听器。唯一的例外是如果我mousemove通过 设置事件侦听器this.elem.addEventListener...，但在这种情况下，我的mousemove函数仅在光标在对象上移动时运行，而不是在文档中的任何位置运行，这是所需的行为。

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

4

1 回答 1

2

使用绑定。你有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);
}
于 2013-09-27T15:00:48.553 回答