JS获取鼠标相对位置的方法_H5之家 - 中国HTML5教程资源分享第一站

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

作者：郑文亮字体：[ ] 类型：转载时间：2016-09-20

这篇文章主要介绍了JS获取鼠标相对位置的方法,涉及javascript事件响应及针对页面元素属性的动态操作技巧,需要的朋友可以参考下

本文实例讲述了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></div> <div> <div>这里是图片，因为我用div边框1px，所以两个div会有2px的位置偏移，你可以自己调整</div> </div> </body> </html>

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript中json操作技巧总结》、《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

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

您可能感兴趣的文章:

Tags：