JS获取鼠标相对位置的方法

2019-11-20 08:55:59

字体：大中小

来源：转载

供稿：网友

本文实例讲述了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 style="margin:0px;" onmousemove="m();"><div style="padding:90px;border:1px solid #ccc;font-size:36px;width:800px;height:800px;"> </div><div id="area"></div><div style="width:1400px;height:300px;border:1px solid red;padding-left:1200px;"> <div id="d" style="width:200px;height:200px;border:1px solid green;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程序设计有所帮助。

上一篇：jquery radio的取值_radio的选中_radio的重置方法

下一篇：jQuery flip插件实现的翻牌效果示例【附demo源码下载】