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/

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.

What I did to solve this is associate an "mouseOut" event to every link and check if any link has been pressed. If it did, the mouseOut would fix the positioning of the link. Here's the code:

var mouse_button = false;
$('a')
.mousedown(function(){
    $(this).css('top', '+=2');
    mouse_button = true;

})
.mouseup(function(){
    $(this).css('top', '-=2');
    mouse_button = false;
})
.mouseout(function(){
    if (mouse_button) {
        $(this).css('top', '-=2');
        mouse_button = false;
    }
});

It seems that the mouseup event won't be fired because your mouse has left the link when you release the left button.
From http://www.quirksmode.org/js/events_mouse.html :

Suppose the user depresses the mouse button on a link, then moves his mouse off the link and then releases the mouse button. Now the link only registers a mousedown event.

Maybe you can do this to walkaround:

register mousedown event for a link
register mouseup event for the whole document
when the link fire mousedown event , then the document fire mouseup event, you can think that link is firing mouseup event

What you described is by conscious design.

It has always been the intent that if you mouse down on a link, a button, whatever and change your mind before you've mouse up, you can move the cursor off the link or button and then release the mouse button and the action - the link, button, whatever - will not occur.

It is by design that the mouse up is not sent to the object which received the mouse down if the cursor is moved off the item before mouse up.

This is a user interface design consideration. This is why you should program such that it takes a click to initiate just about any action - not just a mouse down.

I grant you that there may be times where you want to take action on a mouse down, such as in dragging, but it is the exception and when done properly, the mouse up will be seen - except in some versions of IE when the mouse up will be lost if you drag the cursor off the page - to the top, left or right.

If you want to move things around and be able to see the mouse up, it is far better to use divisions or such than things like links.

Links are intended to be just that: link to something. Yes, you can code JavaScript to be executed when the link is clicked - href="javascript:someFunction();" or you can code onclick to execute something or even mouse up over down out. However, the link is intended to do something not to be dragged around.

Use a division or a span and move it around.

Bob

If you look closely at what the browser does, it "drags" the DOM object, in my case a link, upon release the mouseup event does not fire for the DOM object (underneath the mouse, when dragged) or the document (it doesn't seem to bubble).

adding draggable="false" attr helps ...