快捷導(dǎo)航

JS獲取鼠標(biāo)相對(duì)位置的方法

更新時(shí)間：2016年09月20日 16:32:48 作者：鄭文亮

這篇文章主要介紹了JS獲取鼠標(biāo)相對(duì)位置的方法,涉及javascript事件響應(yīng)及針對(duì)頁(yè)面元素屬性的動(dòng)態(tài)操作技巧,需要的朋友可以參考下

本文實(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>

希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

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