js获得鼠标的坐标值的方法


Posted in Javascript onMarch 13, 2013
var x , y;
 
//当需求为获得的坐标值相对于body时,用: 
function positionBody(event){
    event = event||window.event; 
    //获得相对于body定位的横标值;
    x=event.clientX 
    //获得相对于body定位的纵标值; 
    y=event.clientY 
}
//当需求为获得的坐标值相对于某一对象时,用: 
function positionObj(event,id){
    //获得对象相对于页面的横坐标值;id为对象的id 
    var thisX = document.getElementById(id).offsetLeft;
    //获得对象相对于页面的横坐标值; 
    var thisY = document.getElementById(id).offsetTop;
    //获得页面滚动的距离; 
    //注:document.documentElement.scrollTop为支持非谷歌内核;document.body.scrollTop为谷歌内核 
    var thisScrollTop = document.documentElement.scrollTop + document.body.scrollTop;
    event = event||window.event; 
    //获得相对于对象定位的横标值 = 鼠标当前相对页面的横坐标值 - 对象横坐标值;
    x = event.clientX - thisX;
    //获得相对于对象定位的纵标值 = 鼠标当前相对页面的纵坐标值 - 对象纵坐标值 + 滚动条滚动的高度; 
    y = event.clientY - thisY + thisScrollTop; 
}
Javascript 相关文章推荐
Firefox下提示illegal character并出现乱码的原因
Mar 25 Javascript
深入理解JavaScript系列(3) 全面解析Module模式
Jan 15 Javascript
使用JS读秒使用示例
Sep 21 Javascript
浅谈Javascript中的Function与Object
Jan 26 Javascript
Vue.js每天必学之过渡与动画
Sep 06 Javascript
js转换对象为xml
Feb 17 Javascript
jQuery插件echarts实现的去掉X轴、Y轴和网格线效果示例【附demo源码下载】
Mar 04 Javascript
JavaScript 上传文件(psd,压缩包等),图片,视频的实现方法
Jun 19 Javascript
微信小程序-getUserInfo回调的实例详解
Oct 27 Javascript
vue项目中导入swiper插件的方法
Jan 30 Javascript
JavaScript中var、let、const区别浅析
Jun 24 Javascript
layui框架table 数据表格的方法级渲染详解
Aug 19 Javascript
JavaScript将Table导出到Excel实现思路及代码
Mar 13 #Javascript
九种js弹出对话框的方法总结
Mar 12 #Javascript
瀑布流布局并自动加载实现代码
Mar 12 #Javascript
JavaScript中数组对象的那些自带方法介绍
Mar 12 #Javascript
P3P Header解决Cookie跨域的问题
Mar 12 #Javascript
解决JS浮点数运算出现Bug的方法
Mar 12 #Javascript
JS实现悬浮移动窗口(悬浮广告)的特效
Mar 12 #Javascript
You might like
php数据库连接
2006/10/09 PHP
深入php内核之php in array
2015/11/10 PHP
PHP反射API示例分享
2016/10/08 PHP
php rmdir使用递归函数删除非空目录实例详解
2016/10/20 PHP
PHP判断表达式中括号是否匹配的简单实例
2016/10/22 PHP
实例讲解PHP验证邮箱是否合格
2019/01/28 PHP
用javascript自动显示最后更新时间
2007/03/15 Javascript
javascript实现汉字转拼音代码分享
2015/04/20 Javascript
jQuery使用$.ajax进行即时验证实例详解
2015/12/11 Javascript
微信小程序之ES6与事项助手的功能实现
2016/11/30 Javascript
node.js请求HTTPS报错:UNABLE_TO_VERIFY_LEAF_SIGNATURE\的解决方法
2016/12/18 Javascript
js下载文件并修改文件名
2017/05/08 Javascript
详解vue模拟加载更多功能(数据追加)
2017/06/23 Javascript
vue实现简单图片上传
2020/06/30 Javascript
Vue实现手机计算器
2020/08/17 Javascript
[46:49]完美世界DOTA2联赛PWL S3 access vs Rebirth 第二场 12.19
2020/12/24 DOTA
[54:18]DOTA2-DPC中国联赛 正赛 PSG.LGD vs LBZS BO3 第一场 1月22日
2021/03/11 DOTA
在Python中编写数据库模块的教程
2015/04/29 Python
Python实现嵌套列表及字典并按某一元素去重复功能示例
2017/11/30 Python
Python实现发送与接收邮件的方法详解
2018/03/28 Python
Django中反向生成models.py的实例讲解
2018/05/30 Python
Python查找第n个子串的技巧分享
2018/06/27 Python
python调用摄像头显示图像的实例
2018/08/03 Python
flask session组件的使用示例
2018/12/25 Python
linux查找当前python解释器的位置方法
2019/02/20 Python
python基于itchat模块实现微信防撤回
2019/04/29 Python
Python3模拟curl发送post请求操作示例
2019/05/03 Python
python中图像通道分离与合并实例
2020/01/17 Python
Python 如何定义匿名或内联函数
2020/08/01 Python
CSS3 RGBA色彩模式使用实例讲解
2016/04/26 HTML / CSS
HTML5 FileReader对象的具体使用方法
2020/05/22 HTML / CSS
俄语专业毕业生推荐信
2013/10/28 职场文书
二年级小学生评语
2014/04/21 职场文书
优秀大专毕业生求职信
2014/08/04 职场文书
入团申请书格式
2019/06/20 职场文书
python使用pycharm安装pyqt5以及相关配置
2022/04/22 Python