jquery mousemove how to stop
14,021
Solution 1
Add this to your script...
$(document).mouseup(function() {
$(document).off("mousemove", mouse);
});
It unbinds the mousemove
event handler whenever you release the mouse button.
http://jsfiddle.net/JqBZb/201/
I updated it to a later version of jQuery as well, in order to accommodate off()
.
Solution 2
Create a bool to check if mouseDown is true/false
var mouseDown = false;
if(mouseDown ==true){
//move code
}
Comments
-
Mike almost 2 years
I have this fiddle http://jsfiddle.net/JqBZb/193/ where I want my object to move only when the red square is pressed, but I cannot remove the mousemove action when the user releases the mouse. It still moves after that.
HTML:
<div class="pointer"> <div class="marker"></div> </div>
CSS:
.marker { background:#ED1C24; height:2px; right:0; position:absolute; top:35px; width:7px } .pointer { height:72px; position:absolute; top:82px; width:72px; border:1px solid red; left:100px; }
JAVASCRIPT:
var img = $('.pointer'); var offset = img.offset(); function mouse(evt) { var center_x = (offset.left) + (img.width() / 2); var center_y = (offset.top) + (img.height() / 2); var mouse_x = evt.pageX; var mouse_y = evt.pageY; var radians = Math.atan2(mouse_x - center_x, mouse_y - center_y); var degree = (radians * (180 / Math.PI) * -1) + 90; img.css('-moz-transform', 'rotate(' + degree + 'deg)'); img.css('-webkit-transform', 'rotate(' + degree + 'deg)'); img.css('-o-transform', 'rotate(' + degree + 'deg)'); img.css('-ms-transform', 'rotate(' + degree + 'deg)'); } img.mousedown(function (e) { $(document).mousemove(mouse); }).mouseup(function (e) { e.stopPropagation(); })
The original rotation script was provided by this answer https://stackoverflow.com/a/10235298/1168944