代码之家 › 专栏 › 技术社区 › Dusan

在类内设置mouseup事件

mouseevent jquery javascript

Dusan · 技术社区 · 7 年前

我的页面上只有一个元素,我需要检测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事件就不会触发。

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

1 回复 | 直到 7 年前

Titus 7 年前

问题是 docMouseUp 以及 mousedown 事件函数, this 不再引用 MyRectangle 例子这是因为这些函数由 jQuery 以及上下文( 这 变量)设置为生成事件的元素。

要解决此问题,可以绑定 我的矩形 实例如下:

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>