Mouse coordinates in Internet Explorer

Question

I have a map for my game, I have a script that on a click displays an alert of the mouse coordinates on the map.

The map scale is 1 map unit to 2.5 pixels and the map starts at -600, 600 and goes down to 600, 1700. Thus I can't simply throw out the pixels of the mouse.

I got it working (and was pretty happy about it) but alas IE (6) has issues. I have narrowed it down to IE not correctly getting the scroll parameters.

Here is the relevant code that is glitching but the full code is located at http://woarl.com/map/ieMap.html

tempX = event.clientX + document.body.scrollLeft;
tempY = event.clientY + document.body.scrollTop;

Thanks for any help

Answer 1

Try:

tempX = event.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft);
tempY = event.clientY + (document.documentElement.scrollTop || document.body.scrollTop);

Checked your page, and the DOCTYPE is putting IE in standards mode, so the scrollXXX properties you want are actually in document.documentElement, not document.body.

Answer 2

Mouse coordinate locations are horrible, due to the specs not noting whether they ought to be relative to the document or the viewpane, amongst other things. There's a good description of the problem, as well as an example of script that should work across all browsers, at the bottom of http://www.quirksmode.org/js/events_properties.html.

In particular it looks like you need to add document.documentElement.scroll(Left|Top) as well as the event and document.body parameters.