JavaScript獲取滑鼠指標座標詳解

admin發表於2017-10-23
JavaScript指標

實際應用中可能需要獲取滑鼠指標在頁面中的座標，下面就通過程式碼例項介紹一下如何實現此功能。

在標準瀏覽器中可以使用事件物件的pageX和pageY獲取，在IE8和IE8以下瀏覽器中不支援。

程式碼如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css"> 
.tip{ 
  width:200px; 
  border:2px solid #ddd; 
  padding:8px; 
  background:#f1f1f1; 
  color:#666; 
} 
#antzone{
  width:1000px;
  height:1000px;
  background:#ccc;
}
</style> 
<script type="text/javascript"> 
function getMousePos(ev) { 
  var scrollX = document.documentElement.scrollLeft; 
  var scrollY = document.documentElement.scrollTop; 
  var x = ev.pageX || ev.clientX + scrollX; 
  var y = ev.pageY || ev.clientY + scrollY; 
  return { 'x': x, 'y': y }; 
} 
function done(ev){ 
  document.getElementById("show").innerHTML=getMousePos(ev).x+','+getMousePos(ev).y;   
}; 
window.onload=function(){
  var odiv=document.getElementById("antzone");
  odiv.onmousemove=function(ev){
    var ev=window.event||ev;
    done(ev);
  }
}
</script> 
</head> 
<body> 
<div id="show" class="tip">獲取滑鼠點選位置座標</div> 
<div id="antzone"></div> 
</body> 
</html>

上面的實現了我們的要求，下面介紹一下它的實現過程。

一.程式碼註釋:

（1）.function getMousePos(ev){}，此函式可以獲取滑鼠在頁面中的座標，引數是事件物件。

（2）.var scrollX = document.documentElement.scrollLeft ，頁面向左滾動的尺寸；頁面被左側遮擋的尺寸。

（3）.var scrollY = document.documentElement.scrollTop ，和上面同樣的道理，只是方位不同。

（4）.var x = ev.pageX || ev.clientX + scrollX，如果當前瀏覽器支援ev.pageX，就採用此屬性，否則使用ev.clientX + scrollX相容；獲取指標在頁面中x軸座標。

（5）.var y = ev.pageY || ev.clientY + scrollY，和上面是同樣的道理。

（6）.return { 'x': x, 'y': y }，返回一個物件直接量，儲存相關座標。

（7）.function done(ev){}，將座標寫入指定的div，引數是事件物件。

（8）.window.onload=function(){}，文件內容完全載入完畢再去執行函式中的程式碼。

（9）.var odiv=document.getElementById("antzone")，獲取div物件。

（10）.odiv.onmousemove=function(ev)，為div註冊onmousemove事件處理函式。

（11）.var ev=window.event||ev，事件物件相容處理。

二.相關閱讀:

（1）.document.documentElement.scrollTop參閱JavaScript scrollTop一章節。

（2）.clientX屬性參閱JavaScript clientX一章節。

（3）.var ev=window.event||ev參閱var ev=window.event||ev的作用是什麼一章節。

相關文章