JavaScript事件处理函数作用域控制[重复]

7gs2gvoe 于 2023-04-19 发布在 Java

关注(0)|答案(1)|浏览(68)

此问题已在此处有答案：

Removing event listener which was added with bind（10个答案）
2天前关闭。
我在一个对象中有三个相互关联的方法：

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中删除。
有什么我不知道的技巧吗？

JavaScript

来源：https://stackoverflow.com/questions/27967797/javascript-event-handler-function-scope-control

1条答案

按热度按时间

nlejzf6q1#

在周围的类中，你必须记住你的类指针，因为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);
    }
}

赞(0）回复(0）举报 2023-04-19

我来回答

JavaScript事件处理函数作用域控制[重复]

1条答案

相关问题

热门标签

最新问答