Reputation: 3488
I have a single element on my page and i need to detect mosuedown and mouseup events. It works fine, but i decided to move all my javascript inside a class. this is what i came up with so far:
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>
This way, the mouseup event never triggers.
The JSFiddle: https://jsfiddle.net/5hd7672v/
Upvotes: 0
Views: 240
Reputation: 22484
The problem is that inside the docMouseUp
and the callback for the mousedown
event functions, this
no longer refers to the MyRectangle
instance. That is because these functions are invoked by jQuery
and the context (the this
variable) is set to the element that generated the event.
To fix that, you can bind the MyRectangle
instance like this:
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
I've missed the $(document).bind("mouseup", self.docMouseUp);
call.
In order to make that work, you'll need to change the reference to docMouseUp
so it will point to the same function that was set as a callback.
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>
Upvotes: 3