JavaScript 獲取滑鼠指標的座標

admin發表於2017-03-15
JavaScript指標

獲取滑鼠指標的座標是在應用中比較常見，一般多用語拖動效果，或者其他一些需要進行定位的效果。

下面是一個這樣的簡單例項，希望能夠給初學者帶來一定的幫助和啟發。

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>獲取滑鼠的座標-螞蟻部落</title> 
<style type="text/css">
#thediv{
  width:500px;
  height:500px;
  background-color:red;
}
</style>
<script> 
function showPosition(e){ 
  var x=document.getElementById("x");
  var y=document.getElementById("y"); 
  var e=e||window.event; 
  x.value=e.clientX+document.body.scrollLeft+document.documentElement.scrollLeft; 
  y.value=e.clientY+document.body.scrollTop+document.documentElement.scrollTop 
} 
window.onload=function(){
  var thediv=document.getElementById("thediv");
  thediv.onmousemove=showPosition
}
</script> 
</head> 
<body> 
<div id="thediv"> 
x:<input id="x" type="text" value="" /> 
y:<input id="y" type="text" value="" /> 
</div> 
</body> 
</html>

當滑鼠在div中移動的時候可以兩個文字框中實時顯示當前滑鼠指標在文件中的座標。

clientX和clientY屬性返回的是滑鼠指標在瀏覽器視窗中的座標，e.clientX+document.body.scrollLeft+document.documentElement.scrollLeft和e.clientY+document.body.scrollTop+document.documentElement.scrollTop就是返回的滑鼠指標在文件中的座標。 

相關閱讀：

（1）.clientX屬性可以參閱JavaScript clientX一章節。 

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

相關文章