Link to home
Start Free TrialLog in
Avatar of StewartMeyers
StewartMeyersFlag for United States of America

asked on

Detecting mouse button state in JavaScript

I have implemented a form of drag and drop in JavaScript using mousedown, mouseup, and mousemove handlers.  I am attaching these events to document.body.  The problem is when the mouse is released outside the browser window that contains the mouse handlers; the mouseup event does not fire in this case.  When the mouse is then moved back over the browser window that contains the mouse handlers, the application doesn't know the mouse was released.

In IE, I was able to detect whether the mouse button state changed using the event.button property, but this does not work in Firefox.  Anyone know a way to detect the mouse button state in Firefox?  How do you handle this situation?
Avatar of yogi4life
yogi4life
Flag of Norway image
Your question is quite interesting - and I did a test with maps.google.com to see how it was handled with mouse-move and mouse-up in all these browsers: IE, FF, Chrome, Opera and Safari (all on Windows 7 and the latest releases of each browser). And to my amazement Google Maps was able to track mouse movement and mouse up event outside the browser window of all browsers.

So - the verdict is - it is possible to acomplish - I will try to look into how...


Avatar of EscuroAnjo
EscuroAnjo
ASKER CERTIFIED SOLUTION
Avatar of yogi4life
yogi4life
Flag of Norway image
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of StewartMeyers
StewartMeyers
Flag of United States of America image

ASKER

Thank's much!  The real problem was that I was attaching the mouse events to document.body instead of document, otherwise our solutions were similar.  The solution you pointed me to should add an event.button check for IE on the mousemove event, so that when the mouse is moved outside, then back over the browser window, a check can be done to see if the mouse button was released outside the browser window, and if so, dragging should be stopped.