js兼容所有浏览器的pageX和pageY属性

标题中的两个属性具有一定的浏览器兼容性问题。

不出所料，此兼容性问题是由IE9以下浏览器导致的。

但是由于考虑到低版本的IE浏览器用户尚多，所以本章节介绍一下如何实现兼容所有浏览器的pageX和pageY。

jQuery的兼容方式如下:

// Calculate pageX/Y if missing and clientX/Y available
 if ( event.pageX == null && original.clientX != null ) {
     eventDoc = event.target.ownerDocument || document;
     doc = eventDoc.documentElement;
     body = eventDoc.body;
     event.pageX = original.clientX + ( doc && doc.scrollLeft || body && body.scrollLeft || 0 ) - ( doc && doc.clientLeft||body&&body.clientLeft || 0 );
     event.pageY = original.clientY + ( doc && doc.scrollTop  || body && body.scrollTop  || 0 ) - ( doc && doc.clientTop  || body && body.clientTop  || 0 );
 }

其实简单的实现方式就是鼠标相对于浏览器视口的偏移加上文档的滚动条隐藏的高度减去文档的clientTop。

代码如下:

var pageY = event.clientY +document.documentElement. scrollTop-document.documentElement.clientTop

为何要减去document.documentElement.clientTop

这是IE8之下浏览器特有的文档的偏移，即使设置html,body的padding和margin为0也不会影响其值。

在iE7下测试得到:

document.documentElement.clientTop//2px 
document.documentElement.clientLeft //2px 
document.bocy.clientTop//0px
document.body.clientLeft//0px