编程 Javascript

获取鼠标在div中的相对位置的实现代码

Posted in Javascript onDecember 30, 2013

<HEAD> 
<TITLE> JS获取DIV相对坐标</TITLE> 
<script type="text/javascript"><!-- 
function getX(obj){ 
var parObj=obj; 
var left=obj.offsetLeft; 
while(parObj=parObj.offsetParent){ 
left+=parObj.offsetLeft; 
} 
return left; 
} function getY(obj){ 
var parObj=obj; 
var top=obj.offsetTop; 
while(parObj = parObj.offsetParent){ 
top+=parObj.offsetTop; 
} 
return top; 
} 
function DisplayCoord(event){ 
var top,left,oDiv; 
oDiv=document.getElementById("demo"); 
top=getY(oDiv); 
left=getX(oDiv); 
document.getElementById("mp_x").innerHTML = (event.clientX-left+document.documentElement.scrollLeft) -2+"px"; 
document.getElementById("mp_y").innerHTML = (event.clientY-top+document.documentElement.scrollTop) -2+"px"; 
} 
// --></script> 
</HEAD> 
<BODY style="margin:40px;" mce_style="margin:40px;"> 
<div style="background-color:#000000;color:#0011FF;width:300px;height:300px;position:absolute;top:80px;left:90px;margin:0px; border:0px;" id="demo" onmousemove="DisplayCoord(event)"> 
我是DIV,经测试,有2PX的误差... 
</div> 
当前鼠标坐标为： 
X：<span id="mp_x"></span> 
Y：<span id="mp_y"></span> 
</body> 
</BODY> 
</HTML>

如果不对，可以试试将

document.documentElement.scrollLeft

替换成

document.body.scrollLeft

获取鼠标在div中的相对位置的实现代码

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

对 jQuery 中 data 方法的误解分析

Jun 18 Javascript

网页下载文件期间如何防止用户对网页进行其他操作

Jun 27 Javascript

js实现特定位取反原理及示例

Jun 30 Javascript

javascript制作幻灯片（360度全景图片）

Jul 28 Javascript

浅谈jquery的map()和each()方法

Jun 12 Javascript

JavaScript 深层克隆对象详解及实例

Nov 03 Javascript

Javascript中引用类型传递的知识点小结

Mar 06 Javascript

JavaScript实现简单的四则运算计算器完整实例

Apr 28 Javascript

关于js中的鼠标事件总结

Jul 11 Javascript

js实现各浏览器全屏代码实例

Jul 03 Javascript

手把手带你入门微信小程序新框架Kbone的使用

Feb 25 Javascript

JS+CSS实现过渡特效

Jan 02 Javascript

input链接页面、打开新网页等等的具体实现

Dec 30 #Javascript

获取3个数组不重复的值的具体实现

Dec 30 #Javascript

改变隐藏的input中value的值代码

Dec 30 #Javascript

js中switch case循环实例代码

Dec 30 #Javascript

js模仿hover的具体实现代码

Dec 30 #Javascript

js+css实现的简单易用兼容好的分页

Dec 30 #Javascript

jquery复选框全选/取消示例

Dec 30 #Javascript