在 class 中设置 mouseup 事件

Question

我的页面上只有一个元素，我需要检测 mousedown 和 mouseup 事件。它工作正常，但我决定将我所有的 javascript 移动到 class 中。这是我到目前为止想出的：

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

编辑

我错过了 $(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>

在 class 中设置 mouseup 事件

Setting the mouseup event inside a class

javascript

jquery

mouseevent