我在我的 Web 应用程序的页面中看到一个奇怪的鼠标位置问题。我认为页面上特定元素的位置将是相同的，而与呈现它的浏览器无关。我希望使用来自客户端的位置值以及在服务器上执行的一些屏幕捕获功能。
但是我看到的是，每次当我选择页面的一部分时，顶部和左侧的位置都会相对于浏览器发生变化。我已经使用几个 JavaScript 属性测试了浏览器的顶部和左侧，但是对于不同的浏览器，固定位置的左侧和顶部似乎不同（几个像素的差异）。
// 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>当您在各种浏览器中将鼠标悬停在红色框上时，请查看鼠标顶部和左侧返回。
为什么不同的浏览器返回不同的顶部/左侧值？我需要它为所有浏览器返回相同的值。如果有人可以提供对此行为的洞察并提出我可以规避此问题的方法，那就太好了。提前致谢。