How to get mouseup to fire once mousemove complete
Solution 1
This is a pattern I use alot, works generally very well on all things relating to mousemove. The mouseup event is binded when the user clicks mousedown, this forces it to fire when the user lets go of the mouse button, no matter how much it's moved.
$('#element').mousedown(function(e) {
// You can record the starting position with
var start_x = e.pageX;
var start_y = e.pageY;
$().mousemove(function(e) {
// And you can get the distance moved by
var offset_x = e.pageX - start_x;
var offset_y = e.pageY - start_y;
return false;
});
$().one('mouseup', function() {
alert("This will show after mousemove and mouse released.");
$().unbind();
});
// Using return false prevents browser's default,
// often unwanted mousemove actions (drag & drop)
return false;
});
Solution 2
Don't forget to namespace your events otherwise all event handlers will be unbound:
$('#element').bind('mousedown.namespace', function(e) {
$(document).one('mouseup', function() {
callback_func();
$(document).unbind('mousedown.namespace');
});
});
Solution 3
I had a similar problem and this worked for me:
$(document).on("dragend", function(e){
$(e.target).trigger("mouseup");
e.preventDefault();
});
Solution 4
As of JQuery 1.4 you need to substitute $('document') for $(). In fact, I'm using this to make a menu inside a JQuery UI Dialog, which seems to trap mousemove events. So I simply substitute my container div for $() (which looks something like $('#myContainerDiv')). This seems to work fine too.
jwl
Updated on July 09, 2022Comments
-
jwl almost 2 years
It seems that
mouseup
events are only fired when they are not in conjunction with amousemove
. In other words, push down on the left mouse button and let go, andmouseup
is fired. But if you drag across the image and then let go, nomouseup
is fired. Here is an example that shows this behavior:<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <div id="Out"> <img id="Img" src="http://sstatic.net/so/img/logo.png" width=500> </div> <script language=JavaScript> $(function() { $(document).bind("mouseup",function() {alert("UP");}); //$("#Out").bind("mouseup",function() {alert("UP");}); //$("#Img").bind("mouseup",function() {alert("UP");}); }); </script>
If you load this, and click and let go, "UP" will alert. However, if you drag and then let go, no UP is fired.
How can I have
mouseup
fire whenmousemove
is completed, or how can I inspect themousemove
event to determine that the left mouse button is now off?