1
2
3
4
5
6
7
8
9
10
11
12
13
var getCursorPositionOfPage = function(e){
    var x, y;
 
    e = e || window.event;
 
    x = e.pageX || (e.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft));
    y = e.pageY || (e.clientY + (document.documentElement.scrollTop  || document.body.scrollTop));
 
    return {
        'x':x,
        'y':y
    };
};

使用方式:

1
document.querySelector("body").addEventListener("click",getCursorPositionOfPage ,false);

1
document.getElementsByTagName("body")[0].onmousemove = getCursorPositionOfPage ;

经过简单的测试,各个浏览器的差异如下:

1
2
3
4
5
6
7
8
9
 pageY       chrome/IE10/IE9/firefox29          随滚动条滚动而变化        页面高度   X 同理      IE8/IE7 未定义
 
 clientY     chrome/IE10/IE9/IE8/IE7/firefox29  不随滚动条滚动而产生变化   窗口高度   X 同理
 
 
 
 document.documentElement   chrome/IE10/IE9/IE8/IE7/firefox29     html
 
 document.body              chrome/IE10/IE9/IE8/IE7/firefox29     body
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// 滚动条未滚动
 document.documentElement.scrollTop    chrome            0
 
 document.body.scrollTop               chrome            0
 
// 滚动条滚动
 document.documentElement.scrollTop    chrome            0
 
 document.body.scrollTop               chrome            100
 
 
// 滚动条未滚动
 document.documentElement.scrollTop    IE10/IE9/IE8/IE7/firefox29            0
 
 document.body.scrollTop               IE10/IE9/IE8/IE7/firefox29            0
 
// 滚动条滚动
 document.documentElement.scrollTop    IE10/IE9/IE8/IE7/firefox29            100
 
 document.body.scrollTop               IE10/IE9/IE8/IE7/firefox29            0

上面的 0 表示就是 0 ,100 表示有值。