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 相关文章推荐
JavaScript 中的replace方法说明
Apr 13 Javascript
js查错流程归纳
May 04 Javascript
JavaScript字符串对象slice方法入门实例(用于字符串截取)
Oct 16 Javascript
jquery实现在网页指定区域显示自定义右键菜单效果
Aug 25 Javascript
javascript断点调试心得分享
Apr 23 Javascript
JavaScript校验Number(4,1)格式的数字实例代码
Mar 13 Javascript
JavaScript反弹动画效果的实现代码
Jul 13 Javascript
canvas轨迹回放功能实现
Dec 20 Javascript
原生JS实现自定义下拉单选选择框功能
Oct 12 Javascript
js中对象与对象创建方法的各种方法
Feb 27 Javascript
vue+Element实现搜索关键字高亮功能
May 28 Javascript
Object.keys() 和 Object.getOwnPropertyNames() 的区别详解
May 21 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的4种常见运行方式
2015/03/20 PHP
学习php设计模式 php实现享元模式(flyweight)
2015/12/07 PHP
PHP解决中文乱码
2017/04/28 PHP
代码精简的可以实现元素圆角的js函数
2007/07/21 Javascript
JS提交并解析后台返回的XML的代码
2008/11/03 Javascript
js获取提交的字符串的字节数
2009/02/09 Javascript
基于SVG的web页面图形绘制API介绍及编程演示
2013/06/28 Javascript
DOM基础教程之使用DOM
2015/01/19 Javascript
JS实现漂亮的窗口拖拽效果(可改变大小、最大化、最小化、关闭)
2015/10/10 Javascript
javascript中闭包(Closure)详解
2016/01/06 Javascript
jQuery实现的指纹扫描效果实例(附演示与demo源码下载)
2016/01/26 Javascript
js中数组的常用方法小结
2016/12/30 Javascript
vue+vuex+axios+echarts画一个动态更新的中国地图的方法
2017/12/19 Javascript
vue移动端UI框架实现QQ侧边菜单组件
2018/03/09 Javascript
基于layui轮播图满屏是高度自适应的解决方法
2019/09/16 Javascript
从Node.js事件触发器到Vue自定义事件的深入讲解
2020/06/26 Javascript
[03:30]完美盛典趣味短片 CSGO2019年度名场面
2019/12/07 DOTA
[05:23]DOTA2-DPC中国联赛2月1日Recap集锦
2021/03/11 DOTA
使用python实现生成用户信息
2017/03/20 Python
Python查找两个有序列表中位数的方法【基于归并算法】
2018/04/20 Python
Python实现爬虫设置代理IP和伪装成浏览器的方法分享
2018/05/07 Python
Python OpenCV处理图像之图像直方图和反向投影
2018/07/10 Python
Python3 sys.argv[ ]用法详解
2019/10/24 Python
python实现数据清洗(缺失值与异常值处理)
2019/12/02 Python
Python数据持久化存储实现方法分析
2019/12/21 Python
使用Python webdriver图书馆抢座自动预约的正确方法
2021/03/04 Python
The Hut美国/加拿大:英国领先的豪华在线百货商店
2019/03/26 全球购物
为您的家、后院、车库等在线购物:Spreetail
2019/06/17 全球购物
C#如何进行LDAP用户校验
2012/11/21 面试题
一年级评语大全
2014/04/23 职场文书
说明书范文
2014/05/07 职场文书
推荐信模板
2014/05/09 职场文书
公司年会策划方案
2014/05/17 职场文书
2014年秋季开学寄语
2014/08/02 职场文书
大学生国家助学金感谢信
2015/01/23 职场文书
幼儿园见习总结
2015/06/23 职场文书