获取鼠标在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 相关文章推荐
JavaScript 10件让人费解的事情
Feb 15 Javascript
javascript取消文本选定的实现代码
Nov 14 Javascript
动态加载外部javascript文件的函数代码分享
Jul 28 Javascript
js获取form的方法
May 06 Javascript
JavaScript常用正则验证函数实例小结【年龄,数字,Email,手机,URL,日期等】
Jan 23 Javascript
tablesorter.js表格排序使用方法(支持中文排序)
Feb 10 Javascript
Vue全家桶实践项目总结(推荐)
Nov 04 Javascript
Vue.js自定义事件的表单输入组件方法
Mar 08 Javascript
Vue实现调节窗口大小时触发事件动态调节更新组件尺寸的方法
Sep 15 Javascript
Element Input组件分析小结
Oct 11 Javascript
vue抽出组件并传值实例
Jul 31 Javascript
js删除对象中的某一个字段的方法实现
Jan 11 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
php实现数组按指定KEY排序的方法
2015/03/30 PHP
PHP 二维数组和三维数组的过滤
2016/03/16 PHP
Thinkphp事务操作实例(推荐)
2017/04/01 PHP
如何在一个页面显示多个百度地图
2013/04/07 Javascript
jquery.post用法示例代码
2014/01/03 Javascript
jQuery中wrapAll()方法用法实例
2015/01/16 Javascript
jQuery.deferred对象使用详解
2016/03/18 Javascript
AngularJS 入门教程之HTML DOM实例详解
2016/07/28 Javascript
移动端点击图片放大特效PhotoSwipe.js插件实现
2016/08/25 Javascript
前端弹出对话框 js实现ajax交互
2016/09/09 Javascript
Angular2 (RC5) 路由与导航详解
2016/09/21 Javascript
解析ajaxFileUpload 异步上传文件简单使用
2016/12/30 Javascript
通过构造函数实例化对象的方法
2017/06/28 Javascript
Angular 开发学习之Angular CLI的安装使用
2017/12/31 Javascript
JS面向对象的程序设计相关知识小结
2018/05/26 Javascript
vue中各选项及钩子函数执行顺序详解
2018/08/25 Javascript
vue-cli3.0+element-ui上传组件el-upload的使用
2018/12/03 Javascript
详细介绍解决vue和jsp结合的方法
2020/02/06 Javascript
JS+JQuery实现无缝连接轮播图
2020/12/30 jQuery
python 实现文件的递归拷贝实现代码
2012/08/02 Python
Python实现的Excel文件读写类
2015/07/30 Python
Python中多线程的创建及基本调用方法
2016/07/08 Python
linux环境下的python安装过程图解(含setuptools)
2017/11/22 Python
对Python中range()函数和list的比较
2018/04/19 Python
Python unittest单元测试框架及断言方法
2020/04/15 Python
英国假发网站:Hothair
2018/02/23 全球购物
DC Shoes荷兰官方网站:美国极限运动品牌
2019/10/22 全球购物
香港士多网上超级市场:Ztore
2021/01/09 全球购物
Lungolivigno Fashion官网:高级时装在线购物
2020/10/17 全球购物
当文件系统受到破坏时,如何检查和修复系统?
2012/03/09 面试题
剪枝的学问教学反思
2014/02/07 职场文书
迟到早退检讨书
2014/02/10 职场文书
我们的节日国庆活动方案
2014/08/19 职场文书
幼儿园端午节活动总结
2015/05/05 职场文书
2015年城市管理工作总结
2015/05/23 职场文书
授权协议书范本(3篇)
2019/10/15 职场文书