获取鼠标在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

Javascript 相关文章推荐
如何快速的呈现我们的网页的技巧整理
Jul 01 Javascript
javascript深入理解js闭包
Jul 03 Javascript
extjs 3.31 TreeGrid实现静态页面加载json到TreeGrid里面
Apr 02 Javascript
如何使用Javascript正则表达式来格式化XML内容
Jul 04 Javascript
Jquery 改变radio/checkbox选中状态,获取选中的值(示例代码)
Dec 12 Javascript
JS的数组迭代方法
Feb 05 Javascript
jQuery动态生成Bootstrap表格
Nov 01 Javascript
详解基于 axios 的 Vue 项目 http 请求优化
Sep 04 Javascript
vue draggable resizable gorkys与v-chart使用与总结
Sep 05 Javascript
使用js实现一个简单的滚动条过程解析
Sep 10 Javascript
vue实现购物车小案例
Sep 27 Javascript
小程序input数据双向绑定实现方法
Oct 17 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
You might like
php5.3 goto函数介绍和示例
2014/03/21 PHP
ThinkPHP中处理表单中的注意事项
2014/11/22 PHP
详解PHP的Yii框架中组件行为的属性注入和方法注入
2016/03/18 PHP
php实现的简单数据库操作Model类
2016/11/16 PHP
PHP字典树(Trie树)定义与实现方法示例
2017/10/09 PHP
一些常用的Javascript函数
2006/12/22 Javascript
固定背景实现的背景滚动特效示例分享
2013/05/19 Javascript
浅析javascript中function 的 length 属性
2014/05/27 Javascript
JQuery控制Radio选中方法分析
2015/05/29 Javascript
JavaScript判断FileUpload控件上传文件类型
2015/09/28 Javascript
javascript字符串替换函数如何一次性全部替换掉
2015/10/30 Javascript
给before和after伪元素设置js效果的方法
2015/12/04 Javascript
vue-router3.0版本中 router.push 不能刷新页面的问题
2018/05/10 Javascript
JavaScript中的ES6 Proxy的具体使用
2019/06/16 Javascript
微信小程序 scroll-view 实现锚点跳转功能
2019/12/12 Javascript
JavaScript HTML DOM 元素 (节点)新增,编辑,删除操作实例分析
2020/03/02 Javascript
[01:20]DOTA2 2017国际邀请赛冠军之路无止竞
2017/06/19 DOTA
[00:12]2018DOTA2亚洲邀请赛SOLO赛 MidOne是否中单第一人?
2018/04/05 DOTA
[49:08]完美世界DOTA2联赛PWL S2 LBZS vs FTD.C 第一场 11.27
2020/12/01 DOTA
Python import自定义模块方法
2015/02/12 Python
列举Python中吸引人的一些特性
2015/04/09 Python
Python实现返回数组中第i小元素的方法示例
2017/12/04 Python
python 类对象和实例对象动态添加方法(分享)
2017/12/31 Python
详解python多线程、锁、event事件机制的简单使用
2018/04/27 Python
python粘包问题及socket套接字编程详解
2019/06/29 Python
python之pexpect实现自动交互的例子
2019/07/25 Python
python绘制玫瑰的实现代码
2020/03/02 Python
如何用python批量调整视频声音
2020/12/22 Python
Canvas引入跨域的图片导致toDataURL()报错的问题的解决
2018/09/19 HTML / CSS
Sneaker Studio匈牙利:购买运动鞋
2018/03/26 全球购物
捷克购买家具网站:JENA nábytek
2020/03/19 全球购物
本科生的职业生涯规划范文
2014/01/09 职场文书
自荐信格式简述
2014/01/25 职场文书
2014年学生资助工作总结
2014/12/18 职场文书
小学班主任教育随笔
2015/08/15 职场文书
利用python做数据拟合详情
2021/11/17 Python