JavaScript 獲取滑鼠指標座標

admin發表於2017-10-23

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

在標準瀏覽器中可以使用事件物件的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的作用是什麼一章節。

相關文章