JS獲取鼠標相對位置的方法
更新時間：2016年09月20日 16:32:48 作者：鄭文亮
這篇文章主要介紹了JS獲取鼠標相對位置的方法,涉及javascript事件響應(yīng)及針對頁面元素屬性的動態(tài)操作技巧,需要的朋友可以參考下
本文實例講述了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的位置偏移，你可以自己調(diào)整</div>
</div>
</body>
</html>
更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《JavaScript中json操作技巧總結(jié)》、《JavaScript切換特效與技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》、《JavaScript動畫特效與技巧匯總》、《JavaScript錯誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學運算用法總結(jié)》
希望本文所述對大家JavaScript程序設(shè)計有所幫助。
相關(guān)文章
最近在用uni-app開發(fā)小程序,需要獲取用戶所在城市,小程序本身沒有這樣的api,那么怎么實現(xiàn)呢?下面這篇文章主要給大家介紹了關(guān)于uniapp微信小程序獲取當前城市名稱逆地址解析的相關(guān)資料,需要的朋友可以參考下2022-11-11
使用BroadcastChannel進行跨窗口通信的實例詳解
BroadcastChannel 提供了一種簡單而有效的方式來實現(xiàn)同一瀏覽器環(huán)境下不同頁面或腳本之間的通信,對于需要跨窗口、標簽頁或 iframe 同步數(shù)據(jù)的應(yīng)用場景,它是一種非常便捷的解決方案,本文介紹了如何使用 BroadcastChannel 進行跨窗口通信,需要的朋友可以參考下2024-08-08
在微信小程序中,實現(xiàn)錄音及播放功能需用到錄音管理器wx.getRecorderManager()和innerAudioContext對象,調(diào)用play方法播放,結(jié)合表單,可以添加錄音和播放按鈕,用數(shù)據(jù)綁定保存路徑,注意上傳服務(wù)器保存錄音文件以便持久化存儲2024-10-10
這篇文章主要介紹了頁面滾動事件的基礎(chǔ)概念、應(yīng)用場景及優(yōu)化技巧,幫助開發(fā)者在實際項目中靈活使用滾動事件,提升用戶體驗,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2025-01-01
非常漂亮的緩沖效果代碼，大家可以看看下。2009-06-06
JavaScript在IE和Firefox(火狐)的不兼容問題解決方法小結(jié)
今天測試代碼時，發(fā)現(xiàn)不少IE可以運行的ajax，但在FF中報錯。IE和Firefox(火狐)在JavaScript方面的不兼容及統(tǒng)一方法總結(jié)如下，需要的朋友可以看下，對于以后的代碼書寫一定要考慮到多瀏覽器的兼容性。2010-04-04
這篇文章主要介紹了html的DOM中Event對象onabort事件用法,實例分析了onabort事件的適用范圍與對應(yīng)的javascript使用技巧,需要的朋友可以參考下2015-01-01
在Openlayers中,使用ol/sphere模塊的getDistance函數(shù)可以計算兩點間的大圓距離,繪制線路時,通過監(jiān)聽繪制事件和幾何對象的變化,可實時更新距離,同時getLength函數(shù)幫助獲取整條線路的長度,這些功能主要用于地理信息系統(tǒng)中的距離測量和地圖制作2024-11-11
解讀new?Object()和Object.create()的區(qū)別
這篇文章主要介紹了解讀new?Object()和Object.create()的區(qū)別及說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-02-02
控制圖片大小的方法有很多，在本文將為大家詳細介紹下使用js實現(xiàn)縮放圖片，核心代碼如下，感興趣的朋友可以參考下2013-10-10