JavaScript中的鼠标位置

JavaScript中的event对象一共有六对鼠标的属性。分别如下：

 

 

 

属性对	参考点	浏览器兼容性
ClientX，ClientY	浏览器窗口	所有，Safari
LayerX，LayerY	最近的绝对定位的父节点，如果没有，则为document	Mozila，Safari
OffsetX，OffsetY	事件目标对象	所有，Mozila除外
pageX，pageY	document对象	所有，IE除外
ScreenX，ScreenY	计算机屏幕	所有
X，Y	不要使用它，总有更好的	全部不兼容

 

你通常想知道鼠标相对于document的位置。所以你可以使用pageX,pageY来得到鼠标相对document的位置。但IE不支持它们。

 

但IE支持ClientX，ClientY 属性。它们给出相对于window对象的坐标。

 

我们可以用它们得到document的坐标。只需将ClientX，ClientY 加上相对于window对象的页面的页面滚动的偏移量，就可以。

代码如下：

1. var posX = 0;
2. var posy = 0;
3. var event = event ? event : window.event;
4. if(event.pageX || event.pageY) {
5.     posX = event.pageX;
6.     posY = event.pageY;
7. } else if (event.clientX || event.clientY) {
8.     posX = event.clientX + document.documentElement.scrolLeft +
9.           document.body.scrolLeft;
10.     posY = event.clientY + document.documentElement.scrolTop +
11.           document.body.scrolTop;
13. }

document.documentElement.scrolLeft 和 document.body.scrolLeft 都是相对页面的偏移量。

它们的区别如下：

当没有DOCTYPE声明的时候document.body.scrollTop一切正常

当有DOCTYPE声明的时候document.body.scrollTop总是输出0；

document.body.scrollTop总是输出0；
我们必须改用另一个方法：
document.documentElement.scrollTop
我们刚才使用的document.documentElement.scrollTop不能用了，
它总是输出0.
这是我们又想到了 在没有声明的时候，
需要用
document.body.scrollTop
由前面几个例子我们可以知道，当有DOCTYPE声明的时候，
需要用document.documentElement.scrollTop方法来获取滚动条高度。
当没有声明的时候，用document.body.scrollTop方法。
所以我们需要用到if...else...去判断。
如果有DOCTYPE声明，我们该怎么办，如果没有DOCTYPE声明，我们该怎么办。
var scotop ;
if(document.body.scrollTop){
scotop = document.body.scrollTop;
}else{
scotop = document.documentElement.scrollTop
}
这样判断后，就可以在两种情况下同时使用了。
IE6,IE7,FF2测试通过.
FF3没装，无法测试。

这个方法是google找来的。
相对例子5，感觉他的跟严谨。虽然有的方法我看不懂。

var scrollPos; 
if (typeof window.pageYOffset != 'undefined') { 
	scrollPos = window.pageYOffset; 
} 
else if (typeof document.compatMode != 'undefined' && document.compatMode != 'BackCompat') { 
	scrollPos = document.documentElement.scrollTop; 
} 
else if (typeof document.body != 'undefined') { 
	scrollPos = document.body.scrollTop; 
} 

程序解释：
解释1：
document.body.scrollTop:就是滚动条顶部到网页顶部的这段距离
window.pageYOffset是NS专用属性，它的含义和IE下的document.body.scrollTop一样 。

解释2:
当文档有了标准声明时， document.compatMode 的值就等于 "CSS1compat"， 
当没声明的时候， document.compatMode 的值等于 "BackCompat"，所以想判断文档是否有声明，
可以这么写：
if (typeof document.compatMode != 'undefined' && document.compatMode != 'BackCompat'){
}

解释3:
当文档没有声明的时候，可以用
document.body.scrollTop;来获取滚动条高度。