JavaScript獲取鼠標位置的三種方法

在一些DOM操做中咱們常常會跟元素的位置打交道，鼠標交互式一個常常用到的方面，使人失望的是不一樣的遊覽器下會有不一樣的結果甚至是有的遊覽器下沒結果，這篇文章就鼠標點擊位置座標獲取作一些簡單的總結。

獲取鼠標位置首先要了解什麼是event，event是一個聲明瞭全局變量的一個對象，在chrome和IE下，能夠隨意訪問，對於好奇的朋友console.log一下event。但！！！Firefox下是沒有event這個對象的！！

好消息的是：在IE8，chrome下，是有event這個對象的！

鼠標點擊位置座標

相對於屏幕

若是是涉及到鼠標點擊肯定位置相對比較簡單，獲取到鼠標點擊事件後，事件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元素）的座標時怎麼辦呢？只要加上滾動的位移就能夠了。

在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 };
}

 

轉載地址：http://www.cnblogs.com/dolphinX/archive/2012/10/09/2717119.html