JavaScript mouseUp event ignored when mouse is released during drag

Question

I have a <div> element that is created in my script and appended to another <div>. I have:

 coverElm.onmousedown = mouseDownEventHandeler;
 document.onmouseup = mouseUpEventHandeler;
 document.onmousemove = mouseMoveEventHandeler;

I have the functions defined and work great and keep track of if the mouse is down with a boolean mouseDown.

The Problem - When the mouse is pressed down and is released the document.onmouseup is never handled. I think its because its doing a drag of whatever is in the <div> witch is just a few words of text. I have this issue without text too.

So what I'm looking for is a way to prevent this odd dragging behavior, or way for onmousedrag to see if the mouse is pressed down of not - NOT USING THE MOUSE UP AND MOUSE DOWN METHODS

Here are my functions:

function mouseUpEventHandeler(e) {
        mouseDown = false;
}
function mouseDownEventHandeler(e) {
        mouseDown = true;
}
function mouseMoveEventHandeler(e) {
        if (mouseDown) {
               coverElm.innerHTML ="<p>Mouse down and dragging</p>";
        }
}

Are you absolutely sure that your mouseup handler is not getting called? Can we see your mouseUpEventHandler code? My suspicion is that there's an error in your event handler that's causing it to silently fail, thereby giving the impression that it's not being called in the first place. — awm, Aug 15 '12 at 18:07

Jeffrey Sweeney · Answer 1 · 2012-08-15T18:59:57.447

3

90% of the time, this is because the dragged element is in front of the element with the mouseup event listener, so the parent element underneath never gets the event.

Usually, this can be fixed by using addEventListener as opposed to the inline form of the event. Another way to fix this is to give the dragged element an eventListener for when the mouse is released. Also, you can have a div that is put in front of all other elements whenever an element starts to drag (via the zIndex property).

Edit: I whipped up some proof-of-concept code: http://jsfiddle.net/2BkEM/5/

edited Aug 15 '12 at 18:59

answered Aug 15 '12 at 18:09

Jeffrey Sweeney

5,986
5
24
32

The div is placed over an embedded video so i have its position: absolute so it is in front of the video. It is definatly in front of the video i made the background a color to check. Also on the drag you can see the div drag around. it just doesn't seem to register the mouse up while its being dragged, and the mouseUp event is added to the document. do you still think the `addEventListener` is worth using? If so any resource i should refer to? thanks – Zac Aug 15 '12 at 18:14
This is true. Unless some element is cancelling the `mouseup` event, the document element should always see it eventually. – awm Aug 15 '12 at 18:17
So is there an easy check to see if the mouse is down? i couldn't find any good method? I am using jquery and Ajax so have easy access to both if that helps. – Zac Aug 15 '12 at 18:20
1

With an embedded video, the best way to go about this is to have an element that, when an element starts to be dragged, covers the whole screen. Make it so when you click an element to drag, the whole screen is covered with a div, including the element to drag. Then, add the `mousemove` and `mouseup` event listeners to this new div, and when the mouse is released, the div's `zIndex` moves back behind everything. Because you're using the `embed` tag, I'm pretty sure that the `addEventListener` callbacks won't propagate like they would normally. – Jeffrey Sweeney Aug 15 '12 at 18:20
1

If you would like to look in to the `addEventListener` function a bit more, here's a link: https://developer.mozilla.org/en-US/docs/DOM/element.addEventListener – Jeffrey Sweeney Aug 15 '12 at 18:21
That makes scene, good idea. The page can have anywhere from 1 to 16 videos layed out at once, so im implementing this function in the web-player and have a static method call to create the player with its feed, will it be able to determine which video it is being used for? – Zac Aug 15 '12 at 18:24
that's very helpful, thanks. Ill try implementing the full screen div and shuffle it with the z-index – Zac Aug 15 '12 at 18:26
When the video is first clicked, pass a reference of the containing div element to a local variable. It should work fine. – Jeffrey Sweeney Aug 15 '12 at 18:26
How do i know when the video is clicked? – Zac Aug 15 '12 at 18:31
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/15387/discussion-between-jeffrey-sweeney-and-zeb) – Jeffrey Sweeney Aug 15 '12 at 18:32

score 2 · Accepted Answer · answered Aug 15 '12 at 18:45

2

$j(divID).bind('dragstart', function (event) { event.preventDefault() });

Thanks all

answered Aug 15 '12 at 18:45

Zac

2,201
24
48

JavaScript mouseUp event ignored when mouse is released during drag

2 Answers2