JavaScript 擷取滑鼠點選位置坐标（轉載自https://www.cnblogs.com/dolphinX/archive/2012/10/09/2717119.html ）

​

在一些DOM操作中我們經常會跟元素的位置打交道，滑鼠互動式一個經常用到的方面，令人失望的是不同的浏覽器下會有不同的結果甚至是有的浏覽器下沒結果，這篇文章就上滑鼠點選位置坐标擷取做一些簡單的總結，沒特殊聲明代碼在IE8，FireFox，Chrome下進行測試相容

滑鼠點選位置坐标

相對于螢幕

如果是涉及到滑鼠點選确定位置相對比較簡單，擷取到滑鼠點選事件後，事件screenX，screenY擷取的是點選位置相對于螢幕的左邊距與上邊距，不考慮iframe因素，不同浏覽器下表現的還算一緻。

document.addEventListener('click', function getMousePos(event) {
    var e = event || window.event;
    return console.log('相對浏覽器螢幕坐标：%o',{'x':e.screenX,'y':screenY})
})      

相對浏覽器視窗

簡單代碼即可實作，然而這是還不夠，因為絕大多數情況下我們希望擷取滑鼠點選位置相對于浏覽器視窗的坐标，event的clientX，clientY屬性分别表示滑鼠點選位置相對于文檔的左邊距，上邊距。于是類似的我們寫出了這樣的代碼

document.addEventListener('click', function getMousePos(event) {
    var e = event || window.event;
    return console.log('相對浏覽器視窗坐标：%o',{'x':e.clientX,'y':e.clientY})
})      

相對文檔

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

其實在Firefox下問題會簡單很多，因為Firefox支援屬性pageX,與pageY屬性，這兩個屬性已經把頁面滾動計算在内了。

在Chrome可以通過document.body.scrollLeft，document.body.scrollTop計算出頁面滾動位移，而在IE下可以通過document.documentElement.scrollLeft ，document.documentElement.scrollTop

document.addEventListener('click', 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 console.log('相對文檔坐标：%o',{ 'x': x, 'y': y });
})//以下是懶人版document.addEventListener('click', function getMousePos(event) {    var e = event || window.event;    return console.log('相對浏覽器螢幕坐标：%o',{'x':e.screenX,'y':screenY})})
document.addEventListener('click', function getMousePos(event) {    var e = event || window.event;    return console.log('相對浏覽器視窗坐标：%o',{'x':e.clientX,'y':e.clientY})})document.addEventListener('click', 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 console.log('相對文檔坐标：%o',{ 'x': x, 'y': y });})