javascript - mouseUp event on drag

Question

I have a link which has mousedown and mouseup handlers to animate some objects on page. When dragged (drag and drop) link fires mousedown event but it doesn't fire mouseup when released. is there a workaround for this problem?

Here is a example, if you click link normally it works but when you drag the link mouse up doesn't happen:

http://jsfiddle.net/hL3mg/1/

Answer 1

Handling drags

Something crucial nobody mentions here is that there actually is an event to register the end of a drag, which as explained by the other answers is what's happening here. The event is called dragend, so you can simply do

$("a").on("dragend",function(){
    console.log("Drag End");
});

To register the end of the drag. The disadvantage of this is that you will still see a drag interface (in other words: the browser will show some UI to notify the user he's draggin).

Registering mouse up's

Note from 2020: This isn't a good answer, but I am not familiar anymore with jQuery, so can't update it well. I would guess that event.preventDefault() on the dragstart might or might not be relevant.

There is however also a way to register the sought after mouse ups, simply cancel the drag behaviour by returning false in the click event listener, and then register the mouseup on the document.

$("a").mousedown(function(){
    console.log("Mouse Down");
    return false;
});

$(document).mouseup(function(){
    console.log("Mouse Up");
});

The only remark that I do feel like I have to make is that in a stand alone jsfiddle this worked perfectly, in my own code it did not, so I am listening for both the mouseup and the dragend just to be sure.