手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >JS获取鼠标相对位置的方法
JS获取鼠标相对位置的方法
摘要:本文实例讲述了JS获取鼠标相对位置的方法。分享给大家供大家参考,具体如下:位置functionm(){document.getElement...

本文实例讲述了JS获取鼠标相对位置的方法。分享给大家供大家参考,具体如下:

<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"/> <title>位置</title> <script language="javascript" type="text/javascript"> function m(){ document.getElementById("area").innerHTML=event.clientX +" , "+event.clientY; } function c(){ var objTop = getOffsetTop(document.getElementById("d"));//对象x位置 var objLeft = getOffsetLeft(document.getElementById("d"));//对象y位置 var mouseX = event.clientX+document.body.scrollLeft;//鼠标x位置 var mouseY = event.clientY+document.body.scrollTop;//鼠标y位置 //计算点击的相对位置 var objX = mouseX-objLeft; var objY = mouseY-objTop; clickObjPosition = objX + "," + objY; alert(clickObjPosition); } function getOffsetTop(obj){ var tmp = obj.offsetTop; var val = obj.offsetParent; while(val != null){ tmp += val.offsetTop; val = val.offsetParent; } return tmp; } function getOffsetLeft(obj){ var tmp = obj.offsetLeft; var val = obj.offsetParent; while(val != null){ tmp += val.offsetLeft; val = val.offsetParent; } return tmp; } </script> </head> <body onmousemove="m();"> <div> </div> <div id="area"></div> <div> <div id="d">这里是图片,因为我用div边框1px,所以两个div会有2px的位置偏移,你可以自己调整</div> </div> </body> </html>

希望本文所述对大家JavaScript程序设计有所帮助。

【JS获取鼠标相对位置的方法】相关文章:

js获取滚动距离的方法

js实现鼠标经过表格行变色的方法

JS或jQuery获取ASP.NET服务器控件ID的方法

jQuery子窗体取得父窗体元素的方法

Jquery实现动态切换图片的方法

jQuery获得字体颜色16位码的方法

JQuery勾选指定name的复选框集合并显示的方法

JavaScript获得指定对象大小的方法

三种AngularJS中获取数据源的方式

JavaScript检测鼠标移动方向的方法

精品推荐
分类导航