JQuery mouseup not working after dragging a link

Question

See this jsfiddle:

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

Press and hold the button, drag the button and release. As you can see, the mouseup event never fires if the mouse is not over the element when you release the mouse button. Thus, the style in my example never returns to the original. How do you fire the mouseup event if the mouse button is released, if not over the click of an element?

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

Answer 1

The mouseup event refers to where the pointer is located, and this is the expected behavior. If you want your button to be configured correctly, bind the mouseleave event.

Answer 2

Led an example to give a working example:

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

Once the mousedown ed button is mousedown , the event is bound to the next mouseup , wherever it happens, which resets the style.

Answer 3

That should do the trick. If you click on the button (.but) and drag, you can mouseup anywhere on the page and still fire the click event. If you mouseleave "body body" of the page and mouseup , the bind ed event is mouseleave unbind ed.

 $('.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'); }); } });