javascript取鼠标相对位置坐标

最新推荐文章于 2021-05-31 11:53:21 发布

peter_666

最新推荐文章于 2021-05-31 11:53:21 发布

阅读量1.3k

点赞数

分类专栏： javascript 文章标签： javascript border 测试 function

本文链接：https://blog.csdn.net/peter_666/article/details/7656737

版权

javascript 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

<HTML>
<HEAD>
<TITLE> New Document </TITLE>
</HEAD>

<BODY style="margin:40px;">
<div style="height:400px;width:300px;background-color:blue;" οnmοusemοve="tellMSPosition(event,this)">
第一个测试DIV
DIV 定位方式：普通定位
</div>
<div id="test" style="background-color:#000000;color:#FFFFFF;width:300px;height:300px;position:absolute;top:280px;left:350px;margin:0px; border:0px;" >
第二个测试DIV<br />
DIV 定位方式：绝对定位<br />
<br />
<br />
当前鼠标坐标为：<br />
mousePosition.X：<span id="mp_x"></span><br />
mousePosition.Y：<span id="mp_y"></span>
</div>

</body>

<script type="text/javascript">

function getMousePosition(event,o)
{
o = document.all("test");
 var mousePosition={x:0,y:0};
 var top,left,obj;
    obj=o;
    var ParentObj=obj;

 left=obj.offsetLeft;
 while(ParentObj=ParentObj.offsetParent){
  left+=ParentObj.offsetLeft;
 }
 mousePosition.x=event.clientX-left+document.body.scrollLeft;
 
 ParentObj=obj;
 top=obj.offsetTop;
 while(ParentObj=ParentObj.offsetParent){
  top+=ParentObj.offsetTop;
 }
 mousePosition.y=event.clientY-top+document.body.scrollTop;
 
 return mousePosition;
}
function tellMSPosition(event,o)
{
 var t=getMousePosition(event,o)
 document.getElementById("mp_x").innerHTML = t.x +"px";
 document.getElementById("mp_y").innerHTML = t.y +"px";

}
</script>
</BODY>
</HTML>

peter_666

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript取鼠标相对位置坐标

New Document 第一个测试DIVDIV 定位方式：普通定位第二个测试DIVDIV 定位方式：绝对定位当前鼠标坐标为：mousePosition.X：mousePosition.Y：function getMousePosition(event,o){o = document.all("test"); var mousePosition={
复制链接

扫一扫