15

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/

6 Answers 6

16

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.

2
  • I just made the action for mouseup and .on('dragend' ...) the same and it worked like a charm. This should be the right answer!! thanks.
    – youngrrrr
    Nov 23, 2015 at 2:26
  • What else does return false; prevent from happening?
    – Jessica
    Oct 20, 2016 at 0:49
4

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;
    }
});
1
  • I totally forgot to put the if clause that goes on the mouseout event: if (mouse_button) { $(this).css('top', '-=2'); mouse_button = false; }
    – diogocarmo
    Dec 9, 2011 at 13:00
3

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:

  1. register mousedown event for a link
  2. register mouseup event for the whole document
  3. when the link fire mousedown event , then the document fire mouseup event, you can think that link is firing mouseup event
3
  • In fact, that's my standard way of "cancelling" a click if I didn't mean to do it. May 16, 2011 at 15:21
  • 8
    I just ran into this myself, in Chrome. Binding the entire body, mouseup events don't fire when something is dragged... maybe if it were a drag-and-droppable element... still, wtf? That means there's no way to know when they release the mouse button.
    – Groxx
    Aug 4, 2011 at 2:34
  • Evidence: jsfiddle.net/hL3mg/8 drag the link, the up event never fires until your next click (because it wasn't unbound). Tested in 13.0.782.107 on OSX.
    – Groxx
    Aug 4, 2011 at 2:38
2

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

1

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 ...

<a href="#" draggable="false">link</a>

however, there is still an issue of the user highlighting/selecting something with their cursor and dragging the selected element(s).

Using the mouseout event also helps.

-3

If you need to handle dragging in jQuery why not use Draggable?

1
  • I don't need to handle dragging, I just need to fire mouseUp when link is release, even if dragged...
    – Headshota
    May 16, 2011 at 15:01

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.