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 相关文章推荐
基于JQuery的简单实现折叠菜单代码
Sep 15 Javascript
Javascript图像处理—为矩阵添加常用方法
Dec 27 Javascript
js/jquery判断浏览器的方法小结
Sep 02 Javascript
JS实现两表格里数据来回转移的方法
May 28 Javascript
ANGULARJS中使用JQUERY分页控件
Sep 16 Javascript
jQuery中的一些小技巧
Jan 18 Javascript
es7学习教程之fetch解决异步嵌套问题的方法示例
Jul 21 Javascript
在 Node.js 中使用原生 ES 模块方法解析
Sep 19 Javascript
requireJS模块化实现返回顶部功能的方法详解
Oct 16 Javascript
jQuery获取随机颜色的实例代码
May 21 jQuery
jQuery 导航自动跟随滚动的实现代码
May 30 jQuery
vue计算属性无法监听到数组内部变化的解决方案
Nov 06 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面向对象编程之深入理解方法重载与方法覆盖(多态)
2015/12/24 PHP
ThinkPHP实现转换数据库查询结果数据到对应类型的方法
2017/11/16 PHP
Firebug 字幕文件JSON地址获取代码
2009/10/28 Javascript
JS无限树状列表实现代码
2011/01/11 Javascript
Jquery 的扩展方法总结
2011/10/01 Javascript
jquery中.add()的使用分析
2013/04/26 Javascript
Jquery实现$.fn.extend和$.extend函数
2016/04/14 Javascript
javascript面向对象程序设计高级特性经典教程(值得收藏)
2016/05/19 Javascript
Bootstrap菜单按钮及导航实例解析
2016/09/09 Javascript
详解使用vue脚手架工具搭建vue-webpack项目
2017/05/10 Javascript
Vue非父子组件通信详解
2017/06/12 Javascript
JavaScript实现图片切换效果
2017/08/12 Javascript
jQuery 利用ztree实现树形表格的实例代码
2017/09/27 jQuery
Node.Js中实现端口重用原理详解
2018/05/03 Javascript
JS造成内存泄漏的几种情况实例分析
2020/03/02 Javascript
Node.js设置定时任务之node-schedule模块的使用详解
2020/04/28 Javascript
Vue ElementUI实现:限制输入框只能输入正整数的问题
2020/07/31 Javascript
python实现simhash算法实例
2014/04/25 Python
对numpy数据写入文件的方法讲解
2018/07/09 Python
python去重,一个由dict组成的list的去重示例
2019/01/21 Python
python 随机森林算法及其优化详解
2019/07/11 Python
Canvas波浪花环的示例代码
2020/08/21 HTML / CSS
allbeauty美国:英国在线美容店
2019/03/11 全球购物
波兰快递服务:Globkurier.pl
2019/11/08 全球购物
统计每一学生的平均成绩
2014/06/06 面试题
金蝶的一道SQL笔试题
2012/12/18 面试题
应届生程序员求职信
2013/11/05 职场文书
优秀教师事迹简介
2014/02/02 职场文书
教育英语专业毕业生的求职信
2014/03/13 职场文书
校园主题婚礼活动策划方案
2014/09/15 职场文书
工作检讨书500字
2014/10/19 职场文书
教师考核表个人总结
2015/02/12 职场文书
2015年国庆节演讲稿范文
2015/07/30 职场文书
确保减税降费落地生根,用实实在在措施
2019/07/19 职场文书
JavaScript 去重和重复次数统计
2021/03/31 Javascript
什么是Python装饰器?如何定义和使用?
2022/04/11 Python