PDA

View Full Version : e.pageY in IE?



Trinithis
08-14-2007, 08:12 PM
How can you achieve the effect of e.pageY in IE? (not e.clientY)

jscheuer1
08-15-2007, 03:18 AM
event.clientY

However, it appears as though IE 7 at least adds 2px in both dimensions (nothing to worry about in most cases). And, because client refers to the window (not the page), any scroll state must also be taken into account. Here's a demo loosely adapted from DD's Image w/ description tooltip:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body {
margin:0;
padding:0;
}
</style>
<script type="text/javascript">
function trackMouse(evt) {
var xbox=document.getElementById('xb'), ybox=document.getElementById('yb'),
mouseX, mouseY,
standardbody=(document.compatMode=="CSS1Compat")? document.documentElement : document.body; //create reference to common "body" across doctypes
mouseX = evt&&evt.pageX? evt.pageX: window.event? window.event.clientX + standardbody.scrollLeft : 0;
mouseY = evt&&evt.pageY? evt.pageY: window.event? window.event.clientY + standardbody.scrollTop : 0;
xbox.value=mouseX;
ybox.value=mouseY;
}
onload=function(){
document.onmousemove=trackMouse;
}
</script>
</head>
<body>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
X:<input type="text" id="xb"><br>Y:<input type="text" id="yb">
<div style="cursor:default;position:absolute;top:10px;left:10px;border:1px solid black;">Hi</div>
</body>
</html>

The upper left corner of the box with 'Hi' in it should be 10,10 (12,12 in IE).

Trinithis
08-15-2007, 04:33 AM
Thanks. The following is what I'm going to use, and I hope it will be fine:



var standardBody = (document.compatMode=="CSS1Compat")? document.documentElement: document.body; //This won't contaminate anything; I'm using a closure (along with some other code, like the event handler)

function abc(e) {
if(!e) e = window.event;
if(e.pageX===undefined) {
e.pageX = e.clientX + standardBody.scrollLeft;
e.pageY = e.clientY + standardBody.scrollTop;
}
//etc.
}

jscheuer1
08-15-2007, 05:07 AM
I would formally declare e:


var e=e||window.event;

Other than that, looks fine, as long as you are sure that it will be used only with a mouse event, or at least one that generates coordinates.

Trinithis
08-15-2007, 05:34 AM
I would formally declare e:


var e=e||window.event;

Does that have any particular advantages over !e?

jscheuer1
08-15-2007, 07:38 AM
No, it does have advantages over not declaring the variable. You could as easily use:


if (!e) var e = window.event;

The important thing is to keep e out of the global scope, that's all.