请叫我一米

永远有多远，或许只有一米的距离.

获取鼠标在页面上的位置

2014/07/11 08:22 2 条评论 3221 次浏览 
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
    };
};

使用方式：

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

或

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

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

 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
// 滚动条未滚动
 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 表示有值。