本文實(shí)例講述了JS獲取鼠標(biāo)相對(duì)位置的方法。分享給大家供大家參考，具體如下：
<!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"));//對(duì)象x位置 var objLeft = getOffsetLeft(document.getElementById("d"));//對(duì)象y位置 var mouseX = event.clientX+document.body.scrollLeft;//鼠標(biāo)x位置 var mouseY = event.clientY+document.body.scrollTop;//鼠標(biāo)y位置//計(jì)算點(diǎn)擊的相對(duì)位置 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()">這里是圖片，因?yàn)槲矣胐iv邊框1px，所以兩個(gè)div會(huì)有2px的位置偏移，你可以自己調(diào)整</div></div></body></html>更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《JavaScript中json操作技巧總結(jié)》、《JavaScript切換特效與技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》、《JavaScript動(dòng)畫特效與技巧匯總》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》
希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。
新聞熱點(diǎn)
疑難解答
圖片精選
