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.
You need to reset your css always to avoid this issue, as known, each browser has its own margin and padding default values and you have to reset them and define your own and same default values for all browsers, in your case you need at least this:
I modified your example http://jsfiddle.net/QAc5L/ by including reset.css file from http://meyerweb.com and it works perfectly in firefox and chrome.