I am seeing a strange issue with mouse position in a page on my web application. I thought the position of a particular element on the page will be the same irrespective of the browser it is rendered in. I was hoping to use the position values from the client with some screen capturing functionality executed on the server.
However what I am seeing is that every time when I select a part of the page, the top and left position changes with respect to the browser. I have tested the top and left of the browser by using several JavaScript properties, but the left and top for a fixed position seems to be different for different browsers (difference of a few pixels).
// Detect if the browser is IE or not.
// If it is not IE, we assume that the browser is NS.
var IE = document.all ? true : false;
// If NS -- that is, !IE -- then set up for mouse capture
if (!IE) document.captureEvents(Event.MOUSEMOVE);
// Set-up to use getMouseXY function onMouseMove
document.onmousemove = getMouseXY;
// Temporary variables to hold mouse x-y pos.s
var tempX = 0;
var tempY = 0;
// Main function to retrieve mouse x-y pos.s
function getMouseXY(e) {
if (!e) e = window.event;
if (e.pageX || e.pageY) {
tempX = e.pageX;
tempY = e.pageY;
} else if (e.clientX || e.clientY) {
tempX = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
tempY = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
}
// catch possible negative values in NS4
if (tempX < 0) {
tempX = 0;
}
if (tempY < 0) {
tempY = 0;
}
// show the position values in the form named Show
// in the text fields named MouseX and MouseY
document.Show.clientX.value = e.clientX;
document.Show.clientY.value = e.clientY;
document.Show.pageX.value = e.pageX;
document.Show.pageY.value = e.pageY;
document.Show.scrollLeft.value = document.body.scrollLeft;
document.Show.scrollTop.value = document.body.scrollTop;
document.Show.MouseX.value = tempX;
document.Show.MouseY.value = tempY;
return true;
}html {
font-family:arial;
font-size:12px;
margin:0px;
padding:0px;
}<body>
<br/>
<br/>
<br/>
<br/> <span style="cursor:pointer;background:red;">.</span>
<div style="position:absolute;top:200px;left:200px;width:800px;height:800px;">
<form name="Show">
<input type="text" name="clientX" value="0" size="8">e.clientX
<br>
<input type="text" name="clientY" value="0" size="8">e.clientY
<br>
<input type="text" name="pageX" value="0" size="8">e.pageX
<br>
<input type="text" name="pageY" value="0" size="8">e.pageY
<br>
<input type="text" name="scrollLeft" value="0" size="8">scrollLeft
<br>
<input type="text" name="scrollTop" value="0" size="8">scrollTop
<br>
<input type="text" name="MouseX" value="0" size="8">Left
<br>
<input type="text" name="MouseY" value="0" size="8">Top
<br>
</form>
</div>
</body>Please look at the mouse top and left returned when you hover over the red box in various browsers.
Why are different browsers returning different top/left values? I need this to be returning same values for all browsers. It would be great if some one can provide insight into this behaviour and suggest ways in which I can circumvent this issue. Thanks in advance.
