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.