JQuery mouseup outside window – possible?

Question

I am trying to accomplish a rudimentary drag. On mousedown the item starts dragging, but not at the same speed as the mouse, so i continue dragging when the mouse is outside the window, but if the mouse is not over the page i can't get mouseup events.

I can see other pages do this so i know it is possible. Appreciate any help.

Edit: eg

Play any video on Vimeo http://vimeo.com/19831216 make sure the window is small enough on your screen with space above it, then drag the video's progress bar left and right, now move the cursor outside the top edge of the window while still dragging left/right - see? Now release mouse button while still outside of the window - dragging ends and video continues playing.

Note: Vimeo has an option to use a flash player or HTML5 player and this is with the html5 player.

score 58 · Accepted Answer · edited Aug 30 '13 at 00:41

58

You actually can get the mouseup outside of the browser's window.

It worked for me at least.

$(function(){
    $(window).mouseup(function(){
       alert('mouse up'); 
    });
});

http://jsfiddle.net/fFeJ6/

Working on Chrome 10 on Ubuntu Maverick.

edited Aug 30 '13 at 00:41

Kelstar

810
6
15

answered Mar 24 '11 at 13:00

thwd

23,956
8
74
108

8

Thanks, simple eh? I was using 'body' instead of window. – hooleyhoop Mar 24 '11 at 13:07
yeah and it was actually working on firefox 4, but firefox requires `alert()` to have an argument passed to fire and I forgot that. Cheers! – thwd Mar 24 '11 at 13:10
I tested on windows and mac, this code works. Just add a string to the alert function for some browsers. – Siedrix May 07 '12 at 18:13
2

Could you paste the code into the answer? Save people that extra click. :) – gak Dec 20 '12 at 18:48
On firefox (24.0/windows) it works fine for left mouse button but doesn't trigger for middle or right buttons (assuming right handed, I guess). Chrome does a better job and works for all 3 buttons! – urraka Oct 17 '13 at 23:10
Thanks, this is excellent! Working in Chrome, Firefox and Safari on Mac. Though curiously, in Firefox if you release the mouse over the Developer Tools pane, the mouseup event doesn't get delivered. – thenickdude Feb 28 '16 at 22:30
@thenickdude I'm having same problem in Firefox, mouseup event not firing. Any ideas how to solve the problem? – VoW May 10 '16 at 16:48
You mean the jsfiddle doesn't work for you when you hold down the button inside the preview area (bottom right square) and release it outside the browser window? Are you maybe testing using the right mouse button? Many browsers don't deliver mouseup events for right (or middle) mouse button drags that end outside the window. – thenickdude May 11 '16 at 08:57
This doesn't work in all cases in Chrome. Example: codepen.io/thdoan/pen/jwLPjL (click image, drag up to the top frame, release). – thdoan Jun 23 '17 at 04:38

score 1 · Answer 2 · edited May 23 '17 at 12:34

1

you can not track mouse events outside the browser window with javascript.

as explained here you can only check if the mouse leaves the window.

edited May 23 '17 at 12:34

Community

1
1

answered Mar 24 '11 at 12:05

felixsigl

2,900
1
23
16

Hmm, thanks for the very useful link, it seems to suggest that it is possible, and you are saying it isn't? – hooleyhoop Mar 24 '11 at 12:15
maybe its possible in flash but not with javascript – felixsigl Mar 24 '11 at 12:20
Really? There is no flash on the Vimeo page i am looking at. – hooleyhoop Mar 24 '11 at 12:21
really really? try to inspect the video itself with firebug – felixsigl Mar 24 '11 at 12:26
yes really really really really - i dont have any flash player installed. I am on OSX safari - again, no flash installed whatsoever. – hooleyhoop Mar 24 '11 at 12:36
I assume Vimeo uses HTML5 ` – thwd Mar 24 '11 at 12:56
Please support your answer with more definitive evidence. – Pat Aug 14 '14 at 19:50

score 1 · Answer 3 · answered Mar 24 '11 at 12:09

1

You can maybe catch the mouseout event and then call your mouseup function from there:

$(window).mouseout(function() { $(item).mouseup(); });

answered Mar 24 '11 at 12:09

Richard Dalton

35,513
6
73
91

I do not want to mouseup when leaving the window. I want to continue capturing drag events outside of the window. – hooleyhoop Mar 24 '11 at 12:10
This is kinda the opposite of what i want to do – hooleyhoop Mar 24 '11 at 12:37
@hooleyhoop that's not possible with JS. You can, however, monitor events from any window using something like AutoHotkey. – thdoan Jun 23 '17 at 04:40
The problem with this is that the user might not have let go. They could have dragged something very temporarily too far out the window then back, then it's lost and not being dragged. Why can't javascript just tell me if the mouse pointer is currently down? (when on the window) – Curtis Jul 01 '21 at 03:28

JQuery mouseup outside window – possible?

3 Answers3

Linked