jQuery mouseup not firing after drag off link

Question

See this jsfiddle:

http://jsfiddle.net/CB87X/6/

Click and hold the button, drag off the button and release. As you can see, the mouseup event never fires if the mouse is not over the element when the mouse button is released. Thus, the styling in my example never changes back to its original. How do you fire the mouseup event if the mouse button is released when not over the clicked element?

Edit1: BTW I have looked at several solutions on this site, implemented them, and the mouseup event still did not fire.

Answer 1

The mouseup event is relative to where the pointer is and this is expected behaviour. If you want your button to style properly, bind the mouseleave event as well.

Answer 2

This should do the trick. If you left click on the button (.but) and drag off, you can mouseup anywhere on the page and still fire the click event. If you mouseleave the page 'body' and mouseup, the binded mouseleave event is unbinded.

$('.but').mousedown( function(e) {
    if (e.which == 1) {
        var $this = $(this);
        $this.bind('mouseleave', function(){
            $('body').one('mouseup', function() {
                $this.click();
            });
        });
        $this.mouseup(function() {
            $(this).unbind('mouseleave');
        });
    }
});

Answer 3

Forked your exemple to provide a working example:

http://jsfiddle.net/67Rrs/2/

Once the button is mousedowned, an event is bound to the next mouseup, wherever it happens, that resets the style.

Answer 4

Just use $(document).on('mouseup dragend', somefunc);