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?
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Your question is quite interesting - and I did a test with 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...

Here is probably exactly what you need.  A web-site which explains and shows you all the code you need to get control of drag and drop with mouse. I tested it with IE, FF, Chrome, Safari and Opera. It works for all the browsers except that IE will not track movement and mouse-buttons outside the browser window ... but you said that you had figured that out yourself didnt you?


Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
StewartMeyersAuthor Commented:
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.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Browsers

From novice to tech pro — start learning today.