clientXY，offsetXY，pageXY的區別

簡單提及來，就是：
offsetXY:是該事件發生的盒子模型裏的座標，與滾動條無關。
clientXY：是整個瀏覽器可用部分裏的座標，與滾動條無關。
pageXY：是整個網頁裏的座標，與滾動條有關。

下面來個簡單的例子說明一下。
頁面裏寫了個div，背景顏色藍色，長寬都是10px，fix在網頁的右上角top20:px，right:10px的位置。網頁裏寫了不少的br，使得垂直的滾動條能夠滾動。

.fixed{
    position:fixed;
    width:10px;
    height:10px;
    background:blue;
    top:20px;
    right:10px;
}

大概效果是這樣的：

而後給這個小div綁個點擊事件：

function fixedClick(e){
    console.log("offsetY: " + e.offsetY);
    console.log("clientY: " + e.clientY);
    console.log("pageY: " + e.pageY);
}

作實驗。首先滾動條在位置1，點擊一下div，而後往下拖動滾動條到位置2，點擊一下div。打開console。
結果：

offsetY: 1
clientY: 21
pageY: 1649
offsetY: 7
clientY: 27
pageY: 1974

注意兩次的offsetY和clientY有點偏差，這個偏差在10px之內都是沒問題的。

毫無疑問，offsetY是以這個div的盒子模型的左上角爲原點的，兩次點擊都小於10.
clientY是以瀏覽器可視區域的左上角爲原點的，因此它是大於20，由於咱們的div是top 20px的。
而pageY是很誇張的數字，由於這是按照整個頁面長度來計算的。