javascript獲取滑鼠在網頁文檔中的坐標:獲取滑鼠在網頁中的坐標是常用的操作，本章節就通過一個簡單的代碼實例介紹一下如何實現此功能。代碼如下: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text
javascript獲取滑鼠在網頁文檔中的坐標:
獲取滑鼠在網頁中的坐標是常用的操作，本章節就通過一個簡單的代碼實例介紹一下如何實現此功能。
代碼如下:
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>獲取滑鼠在文檔中的坐標-螞蟻部落</title> <style type="text/css"> #zuobiao{ width:200px; height:200px; background-color:#CCC; text-align:center; } </style> <script type="text/javascript"> var xPos; var yPos; function mouseCoords(ev){ if(ev.pageX||ev.pageY){ return {x:ev.pageX,y:ev.pageY}; } else{ return { x:ev.clientX+document.body.scrollLeft+document.documentElement.scrollLeft, y:ev.clientY+document.body.scrollTop+document.documentElement.scrollTop } } } window.onload=function(){ var zuobiao=document.getElementById("zuobiao"); document.onmousemove=mouseMove; function mouseMove(ev){ ev= ev||window.event; var mousePos=mouseCoords(ev); xPos=mousePos.x; yPos=mousePos.y; zuobiao.innerHTML="X坐標:"+xPos+"<br/>"+"Y坐標:"+yPos; } } </script> </head> <body> <div id="zuobiao"></div> </body> </html>
以上代碼實現了我們的要求，當滑鼠在網頁中移動的時候，能夠在div中實時顯示滑鼠指針在網頁文檔中的坐標，下麵就簡單介紹一下此效果的實現過程。
一.實現原理:
原理比較簡單，那就是為document對象註冊onmousemove事件處理函數，當滑鼠在文檔中移動的時候，獲取滑鼠在網頁文檔中的坐標，在代碼中使用了相容性的寫法，pageX和pageY屬性能夠直接獲取滑鼠在網頁文檔中的坐標，但是這兩個屬性具有瀏覽器相容性問題，所以當瀏覽器不支持這兩個屬性的時候就利用clientX和clientY來獲取，但是這兩個屬性獲取的是滑鼠在網頁客戶可見區域的坐標，並不包括滾動條隱藏的部分，所以必須要和滾動隱藏的尺寸相加才行。
二.代碼註釋:
1.var xPos,var yPos,聲明兩個變數用於存儲滑鼠指針在網頁文檔的坐標。
2.function mouseCoords(ev) {}，此函數可以獲取滑鼠指針在網頁文檔的坐標，參數是事件對象。
3.if(ev.pageX||ev.pageY) ，判斷瀏覽器是否支持pageX和pageY屬性。
4.return {x:ev.pageX,y:ev.pageY}，返回一個對象直接量，屬性即為坐標。
5.return {
x:ev.clientX+document.body.scrollLeft+document.documentElement.scrollLeft,
y:ev.clientY+document.body.scrollTop+document.documentElement.scrollTop
}
如果瀏覽器不支持pageX和pageY屬性，就是使用clientX和clientY屬性再加上滾動的尺寸。
6.window.onload=function(){}，當文檔內容完全載入完畢再去執行函數中的代碼。
7.var zuobiao=document.getElementById("zuobiao")，獲取id屬性值為zuobiao的對象。
8.document.onmousemove=mouseMove，為document註冊事件處理函數。
9.function mouseMove(ev){}，onmousemove事件處理函數，ev為事件對象。
10.ev= ev||window.event，為了相容火狐和其他瀏覽器。
11.var mousePos=mouseCoords(ev)，調用mouseCoords函數。
12. xPos=mousePos.x和yPos=mousePos.y返回x和y坐標。
13.zuobiao.innerHTML="X坐標:"+xPos+"<br/>"+"Y坐標:"+yPos，將坐標寫入div。
三.相關閱讀:
1.clientX和clientY屬性可以參閱javascript的clientX事件屬性一章節。
2.document.body.scrollLeft可以參閱document.documentElement.scrollTop瀏覽器相容一章節。
3.onmousemove事件可以參閱javascript的onmousemove事件一章節。
4.ev= ev||window.event可以參閱var ev=window.event||ev的作用是什麼一章節。
原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=8827
更多內容可以參閱:http://www.softwhy.com/javascript/
