获取鼠标在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 相关文章推荐
Jquery Ajax学习实例 向页面发出请求,返回XML格式数据
Mar 14 Javascript
javascript来定义类的规范小结
Nov 19 Javascript
关于jQuery新的事件绑定机制on()的使用技巧
Apr 26 Javascript
jqgrid 编辑添加功能详细解析
Nov 08 Javascript
jquery弹出层类代码分享
Dec 27 Javascript
JavaScript控制网页平滑滚动到指定元素位置的方法
Apr 17 Javascript
Jquery数字上下滚动动态切换插件
Aug 08 Javascript
浅谈JS中逗号运算符的用法
Jun 12 Javascript
微信小程序 蓝牙的实现实例代码
Jun 27 Javascript
ES6解构赋值实例详解
Oct 31 Javascript
vue2.0使用swiper组件实现轮播的示例代码
Mar 03 Javascript
在vue中使用公共过滤器filter的方法
Jun 26 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
Yii2表单事件之Ajax提交实现方法
2017/05/04 PHP
PHP实现简易计算器功能
2020/08/28 PHP
JavaScript 自动分号插入(JavaScript synat:auto semicolon insertion)
2009/11/04 Javascript
js为空或不是对象问题的快速解决方法
2013/12/11 Javascript
12种JavaScript常用的MVC框架比较分析
2015/11/16 Javascript
js获取页面及个元素高度、宽度的代码
2016/04/26 Javascript
jQuery解决IE6、7、8不能使用 JSON.stringify 函数的问题
2016/05/31 Javascript
创建基于Bootstrap的下拉菜单的DropDownList的JQuery插件
2016/06/02 Javascript
JS使用eval()动态创建变量的方法
2016/06/03 Javascript
javascript鼠标滑过显示二级菜单特效
2020/11/18 Javascript
require.js+vue开发微信上传图片组件
2016/10/27 Javascript
微信小程序实现文字跑马灯效果
2020/05/26 Javascript
vue实现图片加载完成前的loading组件方法
2018/02/05 Javascript
浅谈VUE-CLI脚手架热更新太慢的原因和解决方法
2018/09/28 Javascript
echarts实现词云自定义形状的示例代码
2019/02/20 Javascript
leaflet加载geojson叠加显示功能代码
2020/02/21 Javascript
vue路由结构可设一层方便动态添加路由操作
2020/08/31 Javascript
VUE 项目在IE11白屏报错 SCRIPT1002: 语法错误的解决
2020/09/27 Javascript
利用Vue实现简易播放器的完整代码
2020/12/30 Vue.js
Python collections模块实例讲解
2014/04/07 Python
Python实现动态添加类的属性或成员函数的解决方法
2014/07/16 Python
在Python的web框架中编写创建日志的程序的教程
2015/04/30 Python
Python中的fileinput模块的简单实用示例
2015/07/09 Python
python笔记:mysql、redis操作方法
2017/06/28 Python
解决django前后端分离csrf验证的问题
2019/02/03 Python
英国高级百货公司:Harvey Nichols
2017/01/29 全球购物
买房协议书
2014/04/11 职场文书
村容村貌整治方案
2014/05/21 职场文书
2015年初中元旦晚会活动总结
2014/11/28 职场文书
优秀教育工作者事迹材料
2014/12/24 职场文书
生日寿星公答谢词
2015/09/29 职场文书
《跨越海峡的生命桥》教学反思
2016/02/18 职场文书
分家协议书范本
2016/03/22 职场文书
文书工作总结(范文)
2019/07/11 职场文书
CSS+HTML 实现顶部导航栏功能
2021/08/30 HTML / CSS
Tomcat安装使用及部署Web项目的3种方法汇总
2022/08/14 Servers