'How to get mouseup to fire once mousemove complete

It seems that mouseup events are only fired when they are not in conjunction with a mousemove. In other words, push down on the left mouse button and let go, and mouseup is fired. But if you drag across the image and then let go, no mouseup 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 when mousemove is completed, or how can I inspect the mousemove event to determine that the left mouse button is now off?

javascripthtmljqueryjquery-events


Solution 1:[1]

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 2:[2]

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.

Solution 3:[3]

I had a similar problem and this worked for me:

$(document).on("dragend", function(e){
  $(e.target).trigger("mouseup");
  e.preventDefault();
});

Solution 4:[4]

I've found that when I set my text as unselectable using the below CSS, the mouseup event is inhibited as well -- perhaps this will help someone else.

-moz-user-select: none;
-khtml-user-select: none;
user-select: none;

Solution 5:[5]

I was having a similar issue with KineticJS objects. Using kinetic's dragend instead of mouseup solved the problem.

Solution 6:[6]

I've encountered the same problem. Even after I add e.preventDefault() in the mousedown handler, it is still not resolved.

Finally, I find that if I turn off the following codes in my mousemove handler, my mouseup handler is called normally. 

     mouseDragArea.css({
         top: dragAreaPos.y + 'px',
         left: dragAreaPos.x + 'px',
         width: Math.abs(mouseCurPos.x - mouseClickPos.x) + 'px',
         height: Math.abs( mouseCurPos.y - mouseClickPos.y ) + 'px'
     });

mouseDragArea is a programatically created element, which has a dotted border to show the rectangular area click-dragged by mouse:

    mouseDragArea = $('<div id="mouse-drag-area"></div>');

Then, I've realized that this #mouse-drag-area element is ABOVE the original element that handles the mouseup event. So after adding the following css declaration to #mouse-drag-area, it is sorted:

    pointer-events:none;

In another word, the crux is about which element you are setting your mouseup handler for.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 franzlorenzon
Solution 2 James Ellis-Jones
Solution 3 Dustin Poissant
Solution 4 TimDog
Solution 5 Bill Hoag
Solution 6

Related Questions