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

JavaScript获取鼠标坐标

2017-12-12 23:51| 发布者: admin| 查看: 1566| 评论: 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时,可以显示鼠标指针在浏览器窗口中的坐标。

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

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

鲜花

握手

雷人

路过

鸡蛋

最新评论

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

GMT+8, 2018-1-19 07:30 , Processed in 0.091125 second(s), 22 queries .

Powered by Discuz! X3.2 Licensed

Copyright © 2012-2017 Design: 蚂蚁部落

返回顶部