JS基礎(chǔ)篇--了解JS的clientX、pageX、screenX等方法來獲取鼠標(biāo)坐標(biāo)詳解

phodal 發(fā)布于2019-08-21 10:23 / 4297人閱讀

摘要：相對(duì)瀏覽器窗口簡單代碼即可實(shí)現(xiàn)，然而這是還不夠，因?yàn)榻^大多數(shù)情況下我們希望獲取鼠標(biāo)點(diǎn)擊位置相對(duì)于瀏覽器窗口的坐標(biāo)，的，屬性分別表示鼠標(biāo)點(diǎn)擊位置相對(duì)于文檔的左邊距，上邊距。

在一些DOM操作中我們經(jīng)常會(huì)跟元素的位置打交道，鼠標(biāo)交互式一個(gè)經(jīng)常用到的方面，令人失望的是不同的瀏覽器下會(huì)有不同的結(jié)果甚至是有的瀏覽器下沒結(jié)果，這篇文章就上鼠標(biāo)點(diǎn)擊位置坐標(biāo)獲取做一些簡單的總結(jié)，沒特殊聲明代碼在IE8，F(xiàn)ireFox，Chrome下進(jìn)行測試兼容

方法介紹

關(guān)于js鼠標(biāo)事件綜合各大瀏覽器能獲取到坐標(biāo)的屬性總共以下五種：

event.clientX/Y

event.pageX/Y

event.offsetX/Y

event.layerX/Y

event.screenX/Y

clientX/Y

clientX/Y獲取到的是觸發(fā)點(diǎn)相對(duì)瀏覽器可視區(qū)域左上角距離，不隨頁面滾動(dòng)而改變。
兼容性：所有瀏覽器均支持

pageX/Y

pageX/Y獲取到的是觸發(fā)點(diǎn)相對(duì)文檔區(qū)域左上角距離，會(huì)隨著頁面滾動(dòng)而改變
兼容性：除IE6/7/8不支持外，其余瀏覽器均支持

offsetX/Y

offsetX/Y獲取到是觸發(fā)點(diǎn)相對(duì)被觸發(fā)dom的左上角距離，不過左上角基準(zhǔn)點(diǎn)在不同瀏覽器中有區(qū)別，其中在IE中以內(nèi)容區(qū)左上角為基準(zhǔn)點(diǎn)不包括邊框，如果觸發(fā)點(diǎn)在邊框上會(huì)返回負(fù)值，而chrome中以邊框左上角為基準(zhǔn)點(diǎn)。

兼容性：IE所有版本，chrome，Safari均完美支持，F(xiàn)irefox不支持

layerX/Y

layerX/Y獲取到的是觸發(fā)點(diǎn)相對(duì)被觸發(fā)dom左上角的距離，數(shù)值與offsetX/Y相同，這個(gè)變量就是firefox用來替代offsetX/Y的，基準(zhǔn)點(diǎn)為邊框左上角，但是有個(gè)條件就是，被觸發(fā)的dom需要設(shè)置為position:relative或者position:absolute，否則會(huì)返回相對(duì)html文檔區(qū)域左上角的距離。

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

screenX/Y

screenX/Y獲取到的是觸發(fā)點(diǎn)相對(duì)顯示器屏幕左上角的距離，不隨頁面滾動(dòng)而改變。
兼容性：所有瀏覽器均支持

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

鼠標(biāo)點(diǎn)擊位置坐標(biāo) 相對(duì)于屏幕

如果是涉及到鼠標(biāo)點(diǎn)擊確定位置相對(duì)比較簡單，獲取到鼠標(biāo)點(diǎn)擊事件后，事件screenX，screenY獲取的是點(diǎn)擊位置相對(duì)于屏幕的左邊距與上邊距，不考慮iframe因素，不同瀏覽器下表現(xiàn)的還算一致。

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

相對(duì)瀏覽器窗口

簡單代碼即可實(shí)現(xiàn)，然而這是還不夠，因?yàn)榻^大多數(shù)情況下我們希望獲取鼠標(biāo)點(diǎn)擊位置相對(duì)于瀏覽器窗口的坐標(biāo)，event的clientX，clientY屬性分別表示鼠標(biāo)點(diǎn)擊位置相對(duì)于文檔的左邊距，上邊距。于是類似的我們寫出了這樣的代碼

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

相對(duì)文檔

簡單測試也沒什么問題，但是clientX與clientY獲取的是相對(duì)于當(dāng)前屏幕的坐標(biāo)，忽略頁面滾動(dòng)因素，這在很多條件下很有用，但當(dāng)我們需要考慮頁面滾動(dòng)，也就是相對(duì)于文檔（body元素）的坐標(biāo)時(shí)怎么辦呢？加上滾動(dòng)的位移就可以了，下邊我們?cè)囋囋趺从?jì)算頁面滾動(dòng)的位移。

其實(shí)在Firefox下問題會(huì)簡單很多，因?yàn)镕irefox支持屬性pageX,與pageY屬性，這兩個(gè)屬性已經(jīng)把頁面滾動(dòng)計(jì)算在內(nèi)了。

在Chrome可以通過document.body.scrollLeft，document.body.scrollTop計(jì)算出頁面滾動(dòng)位移，而在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 + "
y: " + y);
    return { "x": x, "y": y };
}