IE的鼠标定位

IE clientX 的2个像素在哪里？(标准模式和非标准模式，如是否有DOCTYPE标签)2008年05月08日 星期四 上午 11:28event.clientX 和 event.clientY 据 M$ 说是除窗口装饰及滚动条外的鼠标离窗口最右边和最上边的距离。但是他的计算却是从 (2,2) 开始的，而不是 (0,0)，那两个像素在哪里？google 到一篇文章，解释说这两个像素存在 document.documentElement.clientLeft 里面。

文章中提到，在标准模式（standards mode）下，clientX 是从 0 开始计算的，而在怪异模式下（quirks mode，有没有更好的翻译？），是从 2 开始的，但是奇怪的很，我的测试两种模式都是从 2,2 开始的。

实 际上，这个值是分别存在于 document.documentElement.clientLeft 和 document.body.clientLeft 。 在 standards mode 下面， document.documentElement.clientLeft 值为 2，document.body.clientLeft 为 0 。在 quirks mode 下面正好相反 document.documentElement.clientLeft 为 0 ，document.body.clientLeft 值为 2 。

所以，想要得到准确的鼠标位置，必须：
x=event.clientX-document.documentElement.clientLeft - document.body.clientLeft ;
y=event.clientY-document.documentElement.clientTop - document.body.clientTop ;



注意，以上代码仅适用于 IE，firefox 两个值都是 undefined。

看到很多人试图解释这两个像素代表什么，我觉得不管理由是什么，他的存在就是不合理的，唯一的作用可能就是徒增加程序员的劳动。


同理：在标准和非标准模式下



浮动图层的原理就是利用document.body.scrollLeft和document.body.scrollTop动态的改变图层的位置，但是当HTML有了类似这样的头之后，图层就打死也不动了。


跟踪之后可以发现，当定义了DOCTYPE之后document.body.scrollLeft和document.body.scrollTop无论滚动条滚动到何处，这样的属性永远都等于零。于是图层就不再浮动了。

一般的解决办法是去掉那个头，呵呵。这里说的是另外一个办法。

在定义了DOCTYPE之后，使用document.documentElement.scrollLeft代替document.body.scrollLeft。同理使用document.documentElement.scrollTop代替document.body.scrollTop。

这样在有DOCTYPE的时候，图层也可以滚动了。

但是，在没有DOCTYPE的时候document.documentElement.scrollLeft也永远为零了，那么，能否有一个在有没有DOCTYPE定义都可以用的方案涅？嘿嘿。

那就可以这样写：

if(document.documentElement && document.documentElement.scrollLeft)
{
scrollLeft = document.documentElement.scrollLeft;
}
else if (document.body)
{
scrollLeft = document.body.scrollLeft;
}
这样就可以在任何情况下使用scrollLeft了，其他的属性(scrollTop、clientWidth、clientHeight)同理。