JS获取鼠标相对位置的方法
本文实例讲述了JS获取鼠标相对位置的方法。分享给大家供大家参考，具体如下：
<!DOCTYPEHTML>
<htmllang="en-US">
<head>
<metacharset="UTF-8"/>
<title>位置</title>
<scriptlanguage="javascript"type="text/javascript">
functionm(){
document.getElementById("area").innerHTML=event.clientX+","+event.clientY;
}
functionc(){
varobjTop=getOffsetTop(document.getElementById("d"));//对象x位置
varobjLeft=getOffsetLeft(document.getElementById("d"));//对象y位置
varmouseX=event.clientX+document.body.scrollLeft;//鼠标x位置
varmouseY=event.clientY+document.body.scrollTop;//鼠标y位置
//计算点击的相对位置
varobjX=mouseX-objLeft;
varobjY=mouseY-objTop;
clickObjPosition=objX+","+objY;
alert(clickObjPosition);
}
functiongetOffsetTop(obj){
vartmp=obj.offsetTop;
varval=obj.offsetParent;
while(val!=null){
tmp+=val.offsetTop;
val=val.offsetParent;
}
returntmp;
}
functiongetOffsetLeft(obj){
vartmp=obj.offsetLeft;
varval=obj.offsetParent;
while(val!=null){
tmp+=val.offsetLeft;
val=val.offsetParent;
}
returntmp;
}
</script>
</head>
<bodystyle="margin:0px;"onmousemove="m();">
<divstyle="padding:90px;border:1pxsolid#ccc;font-size:36px;width:800px;height:800px;"></div>
<divid="area"></div>
<divstyle="width:1400px;height:300px;border:1pxsolidred;padding-left:1200px;">
<divid="d"style="width:200px;height:200px;border:1pxsolidgreen;padding:10px;cursor:hand;"onclick="c()">这里是图片，因为我用div边框1px，所以两个div会有2px的位置偏移，你可以自己调整</div>
</div>
</body>
</html>
更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript中json操作技巧总结》、《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。