js相容所有瀏覽器的pageX和pageY屬性

標題中的兩個屬性具有一定的瀏覽器相容性問題。

不出所料，此相容性問題是由IE9以下瀏覽器導致的。

但是由於考慮到低版本的IE瀏覽器使用者尚多，所以本章節介紹一下如何實現相容所有瀏覽器的pageX和pageY。

jQuery的相容方式如下:

[JavaScript] 純文字檢視 複製程式碼
// 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。

程式碼如下:

[JavaScript] 純文字檢視 複製程式碼
var pageY = event.clientY +document.documentElement. scrollTop-document.documentElement.clientTop

為何要減去document.documentElement.clientTop

這是IE8之下瀏覽器特有的文件的偏移，即使設定html,body的padding和margin為0也不會影響其值。

在iE7下測試得到:

[JavaScript] 純文字檢視 複製程式碼
document.documentElement.clientTop//2px 
document.documentElement.clientLeft //2px 
document.bocy.clientTop//0px
document.body.clientLeft//0px