获取鼠标坐标值的总结为了避免混淆知识点
通过《javaScript高级程序设计》查到这些
event.clientX event.clientY event.pageX event.pageY event.screenX event.screenY
document.documentElement.scrollLeft || document.body.sctollLeft document.documentElement.scrollTop || document.body.scrollTop
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>mousePosition</title>
</head>
<body style="height:1000px;padding-top:400px;">
<h1>html鼠标位置有：客户区（视口）坐标位置，html页面坐标位置，屏幕坐标位置</h1>
<h3>鼠标相对于客户区的位置：<span id="client"></span> 所有的浏览器都支持这两个属性的哦！<h3>
<h3>鼠标相对于document的位置：<span id="page"></span> IE8以前的浏览器不支持这两个属性！<h3>
<h3>鼠标相对于屏幕的位置：<span id="screen"></span> 所有的浏览器都支持这两个属性的哦！<h3>
<P>!!!document.body （混杂模式）或 document.documentElement （标准模式）</p>
<script type="text/javascript">
var oClient = document.getElementById('client');
var oPage = document.getElementById('page');
var oScreen = document.getElementById('screen');
document.onmousemove = function(){
oClient.innerHTML = 'clientX='+getPointerPostion().clientX+';clientY='+getPointerPostion().clientY;
oPage.innerHTML = 'pageX='+getPointerPostion().pageX+';pageY='+getPointerPostion().pageY;
oScreen.innerHTML = 'screenX='+getPointerPostion().screenX+';screenY='+getPointerPostion().screenY;
}
function getElementObject(event){
return event || window.event;
}
function getPointerPostion(e){
e = e || getElementObject(e);
var clientX = e.clientX;
var clientY = e.clientY;
var pageX = e.pageX || (e.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft));
var pageY = e.pageY || (e.clientY + (document.documentElement.scrollTop || document.body.scrollTop));
var screenX = e.screenX;
var screenY = e.screenY;
return {
'clientX':clientX,
'clientY':clientY,
'pageX':pageX,
'pageY':pageY,
'screenX':screenX,
'screenY':screenY
};
}
</script>
</body>
<html>