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

修改

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

在类中设置mouseup事件

1 个答案: