Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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?

like image 471
jwl Avatar asked Dec 15 '09 19:12

jwl


People also ask

How do I use mouseup?

jQuery mouseup() MethodThe mouseup event occurs when the left mouse button is released over the selected element. The mouseup() method triggers the mouseup event, or attaches a function to run when a mouseup event occurs. Tip: This method is often used together with the mousedown() method.

How do I get rid of mouseup event?

In order to cancel the click , like you demonstrated, you can return false in the mousedown event callback which prevents the click event from ever completing. That's incorrect, return false, o event. preventPropagation will stop the mouseup but no the click event.


2 Answers

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;
});
like image 156
Tatu Ulmanen Avatar answered Oct 16 '22 00:10

Tatu Ulmanen


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');
    });
 });
like image 20
alex Avatar answered Oct 16 '22 02:10

alex