在 class 中设置 mouseup 事件
Setting the mouseup event inside a class
我的页面上只有一个元素,我需要检测 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/
问题是在 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>
我的页面上只有一个元素,我需要检测 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/
问题是在 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>