JavaScript 擷取滑鼠位置座標(點擊位置)代碼

例1

 

代碼如下

複製代碼

var xPos; var yPos; document.onmousemove = mouseMove; function mouseMove(ev) { ev = ev window.event; var mousePos = mouseCoords(ev); xPos = mousePos.x; yPos = mousePos.y; } function mouseCoords(ev) { if (ev.pageX ev.pageY) { return { x: ev.pageX, y: ev.pageY }; } return { x:ev.clientX+document.body.scrollLeft+document.documentElement.scrollLeft, y:ev.clientY + document.body.scrollTop + document.documentElement.scrollTop }; }

擷取滑鼠點擊位置座標

相對於螢幕

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

代碼如下	複製代碼
function getMousePos(event) {             var e = event || window.event;             return {'x':e.screenX,'y':screenY} }

相對瀏覽器視窗

代碼如下	複製代碼
function getMousePos(event) {             var e = event || window.event;             return {'x':e.clientX,'y':clientY} }

相對文檔

代碼如下

複製代碼

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

不同瀏覽器中event位置屬性的分析:

1. IE的event.x,event.y是以事件觸發元素的父元素外界為參考點(不包括滾動距離)
2. Firefox的event.pageX,event.pageY是以body元素為參考點(包括滾動距離)
3. event.clientX,event.clientY以瀏覽器左上方為參考點(不包括滾動距離)
4. IE的event.offsetX,event.offsetY和Firefox的event.layerX,event.layerY以事件觸發元素內界的左上方為參考點(包括滾動距離,當有邊框時,可能出現負數)

1. scrollHeight: 擷取對象的滾動高度
2. scrollLeft:設定或擷取位於對象左邊界和視窗中目前可見內容的最左端之間的距離
3. scrollTop:設定或擷取位於對象最頂端和視窗中可見內容的最頂端之間的距離
4. scrollWidth:擷取對象的滾動寬度
5. offsetHeight:擷取對象相對於版面或由父座標 offsetParent 屬性指定的父座標的高度
6. offsetLeft:擷取對象相對於版面或由 offsetParent 屬性指定的父座標的計算左側位置
7. offsetTop:擷取對象相對於版面或由 offsetTop 屬性指定的父座標的計算頂端位置