JavaScript 獲取鼠標點擊坐標五種方式及兼容性

轉自 http://www.poorren.com/javaScript-got-mouse-position/

關于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獲取到的是觸發點相對顯示器屏幕左上角的距離，不隨頁面滾動而改變

兼容性：所有瀏覽器均支持

以上內容收集自網絡

日常工作中，常用到offsetX，下面提供兩個據說比較靠譜的獲取方案，兼容多瀏覽器，歡迎指正。

方案一（在使用，獲取的是在當前頁面內的全局坐標，若需要使用相對父級容器的坐標，可以使用jQuery的offset或者原生js等方式獲取元素坐標，進一步計算，鼠標相對元素的相對坐標）：

var getPosition = function(event) { var e = event || window.event; return { x: e.pageX || e.clientX + document.documentElement.scrollLeft || document.body.scrollLeft, y: e.pageY || e.clientY + document.documentElement.scrollTop || document.body.scrollTop }; };

1

2

3

4

5

6

7

原生js獲取元素所在坐標，用于計算鼠標在元素內的相對坐標

var getElPosition = function(el){ var t = el.offsetTop, l = el.offsetLeft; while( el = el.offsetParent){ t += el.offsetTop; l += el.offsetLeft; } return { x : l , y : t }; };

1

2

3

4

5

6

7

8

9

10

11

12

方案二（獲取相對父級容器的坐標，但是這個方法在IE11模擬的IE8下好像有點問題，推薦采用第一種方案進行改進）：

var getPosition = function(event){ var evt =event||window.event; var srcObj = evt.target || evt.srcElement; if (evt.offsetX){ return { x:evt.offsetX, y:evt.offsetY }; }else{ var rect = srcObj.getBoundingClientRect(); return { x:evt.clientX - rect.left, y:evt.clientY - rect.top } } };

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

JavaScript 容器

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。