JavaScript獲取滑鼠座標

admin發表於2017-12-12
JavaScript

當滑鼠點選元素時，可能需要獲得滑鼠指標的座標，本文簡單介紹一下如何實現此功能。

滑鼠座標的參照物件根據需要是不同的，分別介紹如下:

一.相對於顯示螢幕的座標:

使用screenX和screenY屬性獲取滑鼠相對於螢幕左邊緣和上邊緣的距離。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
#mydiv{
  width:100px;
  height:100px;
  background-color:green;
  margin:100px;
}
</style>
<head>
<script type="text/javascript"> 
window.onload=function(){
  var odiv=document.getElementById("mydiv");
  var ospan=document.getElementById("myspan");
  odiv.onclick=function(ev){
    ev=window.event||ev;
    ospan.innerHTML="x:"+ev.screenX+"y:"+ev.screenY;
  }
}
</script> 
</head>
<body>
<div id="mydiv"></div>
<span id="myspan"></span>
</body>
</html>

當點選綠色的div時，可以顯示滑鼠指標在螢幕中的座標。

特別說明:這兩個屬性在所有主流瀏覽器中相容性良好。

二.獲取相對於瀏覽器視窗的座標:

更多時候要獲取滑鼠指標相對於瀏覽器視窗的座標，使用clientX和clientY屬性即可實現。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
#mydiv{
  width:100px;
  height:100px;
  background-color:green;
  margin:100px;
}
</style>
<head>
<script type="text/javascript"> 
window.onload=function(){
  var odiv=document.getElementById("mydiv");
  var ospan=document.getElementById("myspan");
  odiv.onclick=function(ev){
    ev=window.event||ev;
    ospan.innerHTML="x:"+ev.clientX+"y:"+ev.clientY;
  }
}
</script> 
</head>
<body>
<div id="mydiv"></div>
<span id="myspan"></span>
</body>
</html>

當點選綠色的div時，可以顯示滑鼠指標在瀏覽器視窗中的座標。

特別說明:這兩個屬性在所有主流瀏覽器中相容性良好。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
*{
  margin:0px;
  padding:0px;
}
#mydiv{
  width:100px;
  height:100px;
  background-color:green;
  margin:100px;
}
</style>
<head>
<script type="text/javascript"> 
window.onload=function(){
  var odiv=document.getElementById("mydiv");
  var ospan=document.getElementById("myspan");
  odiv.onclick=function(ev){
    ev=window.event||ev;
    var x = ev.pageX;
    var y = ev.pageY;
    ospan.innerHTML="x:"+x+"y:"+y;
  }
}
</script> 
</head>
<body style="height:1200px;">
<div id="mydiv"></div>
<span id="myspan"></span>
</body>
</html>

程式碼可以獲得滑鼠指標相對於文件的座標。

特別說明:低版本IE瀏覽器不支援pageX和pageY。

三.獲取滑鼠指標相對於某個元素的座標:

下面是滑鼠指標相對於div元素的座標，程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
* {
  margin: 0px;
  padding: 0px;
}
#mydiv {
  width: 100px;
  height: 100px;
  background-color: green;
  position: absolute;
  top: 200px;
  left: 300px;
}
</style>
<script type="text/javascript">
function GetCurrentStyle(obj, prop) {
  if (obj.currentStyle) {
    return obj.currentStyle[prop];
  }
  else if (window.getComputedStyle) {
    return window.getComputedStyle(obj, null)[prop];
  }
  return null;
}
window.onload = function () {
  var mydiv = document.getElementById("mydiv");
  var myspan = document.getElementById("myspan");
  mydiv.onmousemove = function zuobiao(ev) {
    var oEvent = ev || event;
    newClientX = oEvent.clientX - parseInt(GetCurrentStyle(mydiv, "left"));
    newClientY = oEvent.clientY - parseInt(GetCurrentStyle(mydiv, "top"));
    myspan.innerHTML = "座標值:X:" + newClientX + " Y:" + newClientY + "";
  }
}
</script>
</head>
<body>
  <div id="mydiv"></div>
  <span id="myspan"></span>
</body>
</html>

相關文章