07-JS特效-事件对象-pageY和screenY和clientY的区别

pageY/pageX:鼠标位于整个网页页面的顶部和左侧部分的距离（页面）

clientX/clientY:鼠标位于浏览器左侧和顶部的距离（浏览器的大小和位置）

screenY/screenX: 鼠标位于屏幕的上方和左侧的距离（屏幕）

鼠标距离整个页面的距离、和距离可视区的距离有时候是相等的

当页面有被卷去的头部或者左侧的时候，这两个值就不相等了。

由此，我们获取以下等式：

鼠标位于整个页面的距离(pageY/X) = 鼠标位于可视区域的距离(clientY/X) + 页面被卷去的头部或者左侧的距离(scrollTop/Left)

pageY/pageX = event.clientY/clientX + scroll().top/scroll().left

function scroll(){
    return {
        "top": window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop,
        "left": window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft
    };
}

pageX/pageY低版本浏览器（IE67）不支持，所以在此封装一个兼容写法：

（求鼠标位于整个页面的坐标）

document.onclick = function (event) {
    //获取事件对象
    event = event || window.event;

    //鼠标位于整个页面的坐标，兼容IE678
    var pagex = event.pageX || event.clientX + scroll().left;
    var pageY = event.pageY || event.clientY +scroll().top;

    console.log(pagex); //值不带px
    console.log(pagey);
}

案例：鼠标跟随