javascript獲取滑鼠在網頁文件中的座標

admin發表於2017-03-18
JavaScript網頁

獲取滑鼠在網頁中的座標是常用的操作，本章節就通過一個簡單的程式碼例項介紹一下如何實現此功能。

程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!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 mousemove 事件一章節。

4.ev= ev||window.event可以參閱var ev=window.event||ev的作用是什麼一章節。  

相關文章