JavaScript獲取鼠標點擊位置坐標的方法

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

鼠標點擊位置坐標

相對于屏幕

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

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


相對瀏覽器窗口

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

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


相對文檔

簡單測試也沒什么問題，但是clientX與clientY獲取的是相對于當前屏幕的坐標，忽略頁面滾動因素，這在很多條件下很有用，但當我們需要考慮頁面滾動，也就是相對于文檔（body元素）的坐標時怎么辦呢？加上滾動的位移就可以了，下邊我們試試怎么計算頁面滾動的位移。

其實在Firefox下問題會簡單很多，因為Firefox支持屬性pageX,與pageY屬性，這兩個屬性已經(jīng)把頁面滾動計算在內(nèi)了。

在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 + 'y: ' + y);
return { 'x': x, 'y': y };
}

生活不易，碼農(nóng)辛苦
如果您覺得本網(wǎng)站對您的學習有所幫助,可以手機掃描二維碼進行捐贈