Установка события mouseup внутри класса

Question

У меня есть один элемент на моей странице, и мне нужно обнаружить события mosuedown и mouseup. Это прекрасно работает, но я решил переместить весь свой JavaScript внутри класса. это то, что я придумал до сих пор:

class MyRectangle {
  constructor(elementId) {
    this.frame = $("#" + elementId);
    this.setListener();
  }

  setListener() {
    this.frame.on("mousedown", function(evt) {
      evt.preventDefault();
      console.log("MOUSE DOWN" + " " + evt.pageX + ", " + evt.pageY);
      $(document).bind("mouseup", this.docMouseUp);
    });
  }

  docMouseUp(evt) {
    console.log("MOUSE UP" + " " + evt.pageX + ", " + evt.pageY);
    $(document).unbind("mouseup", this.docMouseUp);
  }

}

var myRect = new MyRectangle("rectangle");

#rectangle {
  width: 100px;
  height: 100px;
  background-color: #dfca45;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id="rectangle">
</div>

Таким образом, событие mouseup никогда не срабатывает.

JSFiddle: https://jsfiddle.net/5hd7672v/

Answer 1

Проблема в том, что внутри docMouseUp и функции обратного вызова для функций события mousedown, this больше не ссылается на экземпляр MyRectangle. Это потому, что эти функции вызываются jQuery, а контекст (переменная this) устанавливается для элемента, который сгенерировал событие.

Чтобы это исправить, вы можете привязать экземпляр MyRectangle следующим образом:

let self = this;
this.frame.on("mousedown", function(evt) { 
        evt.preventDefault();
        console.log("MOUSE DOWN" + " " + evt.pageX + ", " + evt.pageY);
        $(document).bind("mouseup", self.docMouseUp.bind(self));
});

EDIT

Я пропустил звонок $(document).bind("mouseup", self.docMouseUp);. Чтобы это работало, вам нужно изменить ссылку на docMouseUp, чтобы она указывала на ту же функцию, которая была установлена ​​в качестве обратного вызова.

class MyRectangle {
    constructor(elementId) {
        this.frame = $("#" + elementId);
        this.setListener();
    }

    setListener() {
        let self = this;
        this.docMouseUp = this.docMouseUp.bind(this);
        
        this.frame.on("mousedown", function(evt) { 
            evt.preventDefault();
            console.log("MOUSE DOWN" + " " + evt.pageX + ", " + evt.pageY);
            $(document).bind("mouseup", self.docMouseUp);
        });
    }

    docMouseUp(evt) {
        console.log("MOUSE UP" + " " + evt.pageX + ", " + evt.pageY);
        $(document).unbind("mouseup", this.docMouseUp);     
    }

}

var myRect = new MyRectangle("rectangle");

#rectangle {
  width: 100px;
  height: 100px;
  background-color: #dfca45;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="rectangle">
</div>