Question

我在对象中有3个互连的方法：

    dragStartHandler: function(e) {
        console.log(e.type, 'dragstart', e.pageX, e.pageY);
        document.addEventListener('mousemove', this.dragMoveHandler, false);
        document.addEventListener('mouseup', this.dragEndHandler.bind(this), false);
    },

    dragMoveHandler: function(e) {
        console.log(e.type, 'dragmove', e.pageX, e.pageY);
        this.updateRotation();
    },

    dragEndHandler: function(e) {
        console.log(e.type, 'dragend', e.pageX, e.pageY);
        document.removeEventListener('mousemove', this.dragMoveHandler, false);
    },

它们根据鼠标指针位置处理旋转。我无法弄清楚如何在 dragMoveHandler 中访问原始的 this ，并且能够同时删除元素侦听器。我尝试使用.bind（this），但它返回匿名函数，我无法在 dragEndHandler 中删除。

有没有我不知道的技术？

Answer 1

在周围的类中，你必须记住你的类指针，因为javascript中的this总是指向当前的执行/事件上下文。

首先，如果可能，我建议将您的班级定义重写为不使用object-literal-syntax。

因为那时你可以利用一个常见的模式来“记住”变量中的原始this引用（在本例中名为self）：

var MyClass = function(){
  var self = this; // this line is important, since `this` can change you have to save it
  var dragStartHandler = function(e) {
        console.log(e.type, 'dragstart', e.pageX, e.pageY);
        document.addEventListener('mousemove', self.dragMoveHandler, false);
        document.addEventListener('mouseup', self.dragEndHandler.bind(self), false);
    }
  var dragMoveHandler = function(e) {
        console.log(e.type, 'dragmove', e.pageX, e.pageY);
        self.updateRotation();
    }

  var dragEndHandler = function(e) {
        console.log(e.type, 'dragend', e.pageX, e.pageY);
        document.removeEventListener('mousemove', self.dragMoveHandler, false);
    }
}

JavaScript事件处理函数范围控制

1 个答案: