JS基礎篇--瞭解JS的clientX、pageX、screenX等方法來獲取鼠標座標詳解

在一些DOM操做中咱們常常會跟元素的位置打交道，鼠標交互式一個常常用到的方面，使人失望的是不一樣的瀏覽器下會有不一樣的結果甚至是有的瀏覽器下沒結果，這篇文章就上鼠標點擊位置座標獲取作一些簡單的總結，沒特殊聲明代碼在IE8，FireFox，Chrome下進行測試兼容

方法介紹

關於js鼠標事件綜合各大瀏覽器能獲取到座標的屬性總共如下五種：

• event.clientX/Y
• event.pageX/Y
• event.offsetX/Y
• event.layerX/Y
• event.screenX/Y

clientX/Y

clientX/Y獲取到的是觸發點相對瀏覽器可視區域左上角距離，不隨頁面滾動而改變。
兼容性：全部瀏覽器均支持

pageX/Y

pageX/Y獲取到的是觸發點相對文檔區域左上角距離，會隨着頁面滾動而改變
兼容性：除IE6/7/8不支持外，其他瀏覽器均支持

offsetX/Y

offsetX/Y獲取到是觸發點相對被觸發dom的左上角距離，不過左上角基準點在不一樣瀏覽器中有區別，其中在IE中之內容區左上角爲基準點不包括邊框，若是觸發點在邊框上會返回負值，而chrome中以邊框左上角爲基準點。

兼容性：IE全部版本，chrome，Safari均完美支持，Firefox不支持

layerX/Y

layerX/Y獲取到的是觸發點相對被觸發dom左上角的距離，數值與offsetX/Y相同，這個變量就是firefox用來替代offsetX/Y的，基準點爲邊框左上角，可是有個條件就是，被觸發的dom須要設置爲position:relative或者position:absolute，不然會返回相對html文檔區域左上角的距離。

兼容性：IE6/7/8不支持，opera不支持，IE9/10和Chrome、Safari均支持

screenX/Y

screenX/Y獲取到的是觸發點相對顯示器屏幕左上角的距離，不隨頁面滾動而改變。
兼容性：全部瀏覽器均支持

一張圖來解釋，如圖所示：

鼠標點擊位置座標

相對於屏幕

若是是涉及到鼠標點擊肯定位置相對比較簡單，獲取到鼠標點擊事件後，事件screenX，screenY獲取的是點擊位置相對於屏幕的左邊距與上邊距，不考慮iframe因素，不一樣瀏覽器下表現的還算一致。

function getMousePos(event) {
    var e = event || window.event;
    return {'x':e.screenX,'y':screenY}
}

相對瀏覽器窗口

簡單代碼便可實現，然而這是還不夠，由於絕大多數狀況下咱們但願獲取鼠標點擊位置相對於瀏覽器窗口的座標，event的clientX，clientY屬性分別表示鼠標點擊位置相對於文檔的左邊距，上邊距。因而相似的咱們寫出了這樣的代碼

function getMousePos(event) {
    var e = event || window.event;
    return {'x':e.clientX,'y':clientY}
}

相對文檔

簡單測試也沒什麼問題，可是clientX與clientY獲取的是相對於當前屏幕的座標，忽略頁面滾動因素，這在不少條件下頗有用，但當咱們須要考慮頁面滾動，也就是相對於文檔（body元素）的座標時怎麼辦呢？加上滾動的位移就能夠了，下邊咱們試試怎麼計算頁面滾動的位移。

其實在Firefox下問題會簡單不少，由於Firefox支持屬性pageX,與pageY屬性，這兩個屬性已經把頁面滾動計算在內了。

在Chrome能夠經過document.body.scrollLeft，document.body.scrollTop計算出頁面滾動位移，而在IE下能夠經過document.documentElement.scrollLeft ，document.documentElement.scrollTop

function getMousePos(event) {
    var e = event || window.event;
    var scrollX = document.documentElement.scrollLeft || document.body.scrollLeft;
    var scrollY = document.documentElement.scrollTop || document.body.scrollTop;
    var x = e.pageX || e.clientX + scrollX;
    var y = e.pageY || e.clientY + scrollY;
    //alert('x: ' + x + '\ny: ' + y);
    return { 'x': x, 'y': y };
}