快捷导航
蚂蚁部落 网站首页 实例代码 JS实例 查看内容

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

2017-6-20 23:51| 发布者: admin| 查看: 499| 评论: 0|来自: 蚂蚁部落

当用鼠标点击一个元素的时候,有时候需要获得当前鼠标指针的坐标,本章节就简单介绍一下如何达成此目的。

有时候我们需要的鼠标坐标的参照对象也是不同的,下面就分类介绍一下:

一.相对于显示屏幕的坐标:

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

说明:这两个属性在所有主流浏览器中兼容性良好。

附加介绍:

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

[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 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>

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

三.获取鼠标指针相对于某个元素的坐标:

这里就不做介绍了,相关内容可以参阅如何获取鼠标指针相对于当前容器的坐标一章节。


鲜花

握手

雷人

路过

鸡蛋

最新评论

关于我们|手机版|小黑屋| 蚂蚁部落 ( 鲁ICP备10022556号-3 )

GMT+8, 2017-7-24 16:52 , Processed in 0.053763 second(s), 21 queries .

Powered by Discuz! X3.2 Licensed

Copyright © 2012-2017 Design: 蚂蚁部落

返回顶部