获取鼠标在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 相关文章推荐
js的写法基础分析
Jan 17 Javascript
js汉字排序问题 支持中英文混排,兼容各浏览器,包括CHROME
Dec 20 Javascript
JS模拟自动点击的简单实例
Aug 08 Javascript
jQuery中filter()和find()的区别深入了解
Sep 25 Javascript
给超链接添加特效鼠标移动展示提示信息且随鼠标移动
Oct 17 Javascript
js 删除数组的几种方法小结
Feb 21 Javascript
javascipt:filter过滤介绍及使用
Sep 10 Javascript
一不小心就做错的JS闭包面试题
Nov 25 Javascript
浅谈jQuery中的checkbox问题
Aug 10 Javascript
vue组件jsx语法的具体使用
May 21 Javascript
Vue数字输入框组件使用方法详解
Feb 10 Javascript
Angular之jwt令牌身份验证的实现
Feb 14 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怎样调用MSSQL的存储过程
2006/10/09 PHP
PHP投票系统防刷票判断流程分析
2012/02/04 PHP
Javascript与PHP验证用户输入URL地址是否正确
2014/10/09 PHP
PHP文件上传、客户端和服务器端加限制、抓取错误信息、完整步骤解析
2017/01/12 PHP
JS Timing
2007/04/21 Javascript
$.getJSON在IE下失效的原因分析及解决方法
2013/06/16 Javascript
含有CKEditor的表单如何提交
2014/01/09 Javascript
浅析tr的隐藏和显示问题
2014/03/05 Javascript
JavaScript中的关联数组问题
2015/03/04 Javascript
关于Bootstrap按钮组件消除黄框的方法
2017/05/19 Javascript
使用jQuery.Pin垂直滚动时固定导航
2017/05/24 jQuery
基于require.js的使用(实例讲解)
2017/09/07 Javascript
详解 vue.js用法和特性
2017/10/15 Javascript
vue2.0 下拉框默认标题设置方法
2018/08/22 Javascript
实用Javascript调试技巧分享(小结)
2019/06/18 Javascript
vue+element搭建后台小总结 el-dropdown下拉功能
2020/04/10 Javascript
react 不用插件实现数字滚动的效果示例
2020/04/14 Javascript
python发送伪造的arp请求
2014/01/09 Python
举例详解Python中循环语句的嵌套使用
2015/05/14 Python
python计算圆周率pi的方法
2015/07/11 Python
浅析Python的web.py框架中url的设定方法
2016/07/11 Python
linux环境下python中MySQLdb模块的安装方法
2017/06/16 Python
使用tensorflow实现AlexNet
2017/11/20 Python
Python函数基础实例详解【函数嵌套,命名空间,函数对象,闭包函数等】
2019/03/30 Python
在自动化中用python实现键盘操作的方法详解
2019/07/19 Python
Python callable内置函数原理解析
2020/03/05 Python
什么是Python中的匿名函数
2020/06/02 Python
一篇文章搞懂python的转义字符及用法
2020/09/03 Python
Python如何定义一个函数
2015/09/01 面试题
生日宴会答谢词
2014/01/09 职场文书
精通CAD能手自荐书
2014/01/31 职场文书
学术会议主持词
2014/03/17 职场文书
美德少年事迹材料1000字
2014/08/21 职场文书
专家推荐信范文
2015/03/26 职场文书
自愿离婚协议书范本2016
2016/03/18 职场文书
golang如何去除多余空白字符(含制表符)
2021/04/25 Golang