0

I want to run some code when two event handlers are both triggered. I've tried it like this:

$('#box').mousedown(function(){ 
    $(document).bind('mousemove',function(e){ 
       // more code here 
    }); 
});

But the code even works when I trigger mousedown once and move my mouse after that. I only want to execute the code when my mouse is down and it's moving. How can I achieve that?

fl00r
  • 82,987
  • 33
  • 217
  • 237
iWebaholic
  • 1
  • 1
  • For your reference, the behavior you are experiencing does make sense. You are binding the mousemove event once the mouse down event fire. It is not like a function call. – Craig May 06 '11 at 10:34
  • Possible duplicate of [jquery wait for multiple complete events](http://stackoverflow.com/questions/7432815/jquery-wait-for-multiple-complete-events) – GingerPlusPlus Jul 23 '16 at 13:05

3 Answers3

3

Try giving this a shot? Have a global variable that indicates whether the mouse is down or not. When they mousedown on the #box element the global variable is set to true. When they mouseup it's set back to false. See a live example here.

$(document).ready(function(){
    var mouseDown = false;

    $("#box").mousedown(function(){
        mouseDown = true;
    });

    $(document).mouseup(function(){
        mouseDown = false;
    });

    $(document).mousemove(function(){
        if (mouseDown){
            //do your stuff here
        }
    });
});
Ryan
  • 6,756
  • 13
  • 49
  • 68
3

I think the problem you are having is with your understanding of the way the event handlers work, once you have added an event handler it will listen out for its event.

So your code will add an event handler to listen for mousedown when the dom is ready, once it occurs it will add an event for mousemove - the document now has both event handlers registered so it will do stuff for both independently.

What you want to do, is remove the event handler for the mousemove on the mouseup event. That way the document now no longer listens to the mousemove event handler because its been removed.

$('#box').mousedown(function(){
    $(document).bind('mousemove',function(e){ 
        // Do something:
    }); 
});
$(document).mouseup(function(){
    $(document).unbind('mousemove'); 
});

Here is a simple example, so you can see whats happening it will add a message under the box.

Scoobler
  • 9,696
  • 4
  • 36
  • 51
0

Use the 

event.stop()

or

event.die()

snippet before use the event. Example:

$("#mybutton").unbind("click");
$("#mybutton").die();
$("#mybutton").click(function(){ alert("Hy mate!");});
huncyrus
  • 648
  • 8
  • 18