在javascript的事件對象中的關於事件鼠標位置的幾個屬性（x, pageX, offsetX, scrrenX clientX)及（y, pageY, offsetY, screenY, clientY),

其中offsetX, offsetY是指相對於觸發事件元素的左上角的偏移。但在不同的瀏覽器中其值又有所不同。在chrome opera, safari中是指外邊緣，即把該元素邊框的寬度計算在內，firefox ie則不包含邊框值。如下圖(一個具有藍色邊框的div)所示。

layerX layerY

layerX layerY是相對於position為absolute或relative的父元素胡外邊緣的距離。ie8及ie8之前的版本沒有layerX或layerY值。

如下圖：最外層是一個綠色邊框的div，裏面一層是一個紅色邊框的div, 最裏面是一個藍色邊框的div, 在藍色div上單擊，則該事件的layerX與layerY相相對於最外層綠色外邊緣的距離（中間紅色的div的position設有被設置為absolute或relative, 所有不是相對該元素，反之則是相對於該元素）。

pageX, pageY, x, y, clientX, clientY

pageX, pageY是相對於文檔窗口的左上角，x,y和clientX, clientY相同，其值是相對於可視窗口（瀏覽的可視區域）的左上角。如下圖。

此時可視窗口與文檔窗口重疊，pageX等於clientX, pageY等於clientY, 如果我們縮小瀏覽器窗口直到瀏覽器出現滾動條。此時可視窗口左上角位置不變，但文檔窗口左上角位置發生的變化，如下圖：

由此我們可以看出當瀏覽器沒有滾動條時（可視窗口與文檔窗口重合），pageX與clientX相等，pageX與clientY相等，如果出現下拉滾動條並向下拉動滾動條，文檔窗口向上滾動，如果出現左右滑動的滾動條並向右拉動滾動條，文檔窗口向左滾動，在文檔窗口滾動的情況下，pageX>=clientX, pageY>=clientY, x = clientX, y = clientY。

原文地址：https://blog.csdn.net/yang_chuanlong/article/details/49232945

javascript 中 x offsetX clientX screenX pageX的區別