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对象的页面的页面滚动的偏移量,就可以。
代码如下:
- var posX = 0;
- var posy = 0;
- var event = event ? event : window.event;
- if(event.pageX || event.pageY) {
- posX = event.pageX;
- posY = event.pageY;
- } else if (event.clientX || event.clientY) {
- posX = event.clientX + document.documentElement.scrolLeft +
- document.body.scrolLeft;
- posY = event.clientY + document.documentElement.scrolTop +
- document.body.scrolTop;
- }
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;来获取滚动条高度。