Jquery mousedown + mousemove

Updated:

So, it looks like if your mouse is no longer over the element on which onmouseup is bound, it won’t see the mouse up event. Makes sense, when you stop and think about it, but when the mousedown event happens over the element, we expect, as UI users, for it to know when it was released (even if it isn’t over the element).

So, to get around this, we actually detect the mouseup on the document level.

var clicking = false;

$('.selector').mousedown(function(){
    clicking = true;
    $('.clickstatus').text('mousedown');
});

$(document).mouseup(function(){
    clicking = false;
    $('.clickstatus').text('mouseup');
    $('.movestatus').text('click released, no more move event');
})

$('.selector').mousemove(function(){
    if(clicking == false) return;

    // Mouse click + moving logic here
    $('.movestatus').text('mouse moving');
});

I tried this out on jsbin, and it seems to work. Check it out here: http://jsbin.com/icuso. To edit it (see the JS and HTML), just tag “edit” on the end of the URL. http://jsbin.com/icuso/edit.