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

Code:

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:

Code:

<!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:

Code:

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.
	}