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?
StewartMeyersAsked:
Who is Participating?

[Webinar] Streamline your web hosting managementRegister Today

x
 
yogi4lifeConnect With a Mentor Commented:
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?

http://www.quirksmode.org/js/dragdrop.html

0
 
yogi4lifeCommented:
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...


0
 
EscuroAnjoCommented:
0
 
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.
0
All Courses

From novice to tech pro — start learning today.