本文實例講述了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程序設計有所幫助。