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);
}