javascript如何获取鼠标点击位置的坐标

javascript如何获取鼠标点击位置的坐标:
当用鼠标点击一个元素的时候，有时候需要获得当前鼠标指针的坐标，本章节就简单介绍一下如何达成此目的。
有时候我们需要的鼠标坐标的参照对象也是不同的，下面就分类介绍一下:
一.相对于显示屏幕的坐标:
可以使用screenX和screenY属性获取鼠标相对于屏幕左边缘和上边缘的距离，代码如下:

<!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属性即可实现。
代码实例如下:

<!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时，就可以显示鼠标指针在浏览器窗口中的坐标。

说明:这两个属性在所有主流浏览器中兼容性良好。
附加介绍:
clientX和clientY属性是获取的相对于浏览器的坐标，但是有时候我们想获取相对于body（这里的body就姑且相当于网页页面）的坐标，但是如果网页过长的话，就无法获得了，在火狐浏览器下可以使用pageX和pageY来实现，因为这两个属性已经考虑到这个因素，但是其他浏览器暂时不支持。不过可以通过document.body.scrollLeft，document.body.scrollTop计算出页面滚动位移，而在IE下可以通过document.documentElement.scrollLeft ，document.documentElement.scrollTop。代码实例如下:

<!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 scrollX = document.documentElement.scrollLeft || document.body.scrollLeft;
    var scrollY = document.documentElement.scrollTop || document.body.scrollTop;
    var x = ev.pageX || ev.clientX + scrollX;
    var y = ev.pageY || ev.clientY + scrollY;
    ospan.innerHTML="x:"+x+"y:"+y;
  }
}
</script> 
</head>
<body style="height:1200px;">
<div id="mydiv"></div>
<span id="myspan"></span>
</body>
</html>

以上代码可以获得鼠标指针相对于文档的坐标。

三.获取鼠标指针相对于某个元素的坐标:
这里就不做介绍了，相关内容可以参阅如何获取鼠标指针相对于当前容器的坐标一章节。

原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=8210

更多内容可以参阅:http://www.softwhy.com/javascript/

javascript如何获取鼠标点击位置的坐标

猜你喜欢