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 相关文章推荐
dess中一个简单的多路委托的实现
Jul 20 Javascript
使用jquery动态加载javascript以减少服务器压力
Oct 29 Javascript
jQuery修改CSS伪元素属性的方法
Jul 30 Javascript
不到30行JS代码实现Excel表格的方法
Nov 15 Javascript
jQuery获得包含margin的outerWidth和outerHeight的方法
Mar 25 Javascript
Jquery ajax基础教程
Nov 20 Javascript
深入理解逻辑表达式的用法 与或非的用法
Jun 06 Javascript
JS实现瀑布流布局
Oct 21 Javascript
web前端vue实现插值文本和输出原始html
Jan 19 Javascript
vue element-ui table表格滚动加载方法
Mar 02 Javascript
Vue2.0 给Tab标签页和页面切换过渡添加样式的方法
Mar 13 Javascript
js之ajax文件上传
May 13 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
CodeIgniter配置之autoload.php自动加载用法分析
2016/01/20 PHP
PHP+redis实现的悲观锁机制示例
2018/06/12 PHP
php curl优化下载微信头像的方法总结
2018/09/07 PHP
Laravel使用Queue队列的技巧汇总
2019/09/02 PHP
jQuery 对象中的类数组操作
2009/04/27 Javascript
JavaScript中setAttribute用法介绍
2013/07/20 Javascript
js onload处理html页面加载之后的事件
2013/10/30 Javascript
jquery中的过滤操作详细解析
2013/12/02 Javascript
javaScript年份下拉列表框内容为当前年份及前后50年
2014/05/28 Javascript
使用node.js 获取客户端信息代码分享
2014/11/26 Javascript
js canvas实现适用于移动端的百分比仪表盘dashboard
2017/07/18 Javascript
JS排序算法之冒泡排序,选择排序与插入排序实例分析
2017/12/13 Javascript
vuex的简单使用教程
2018/02/02 Javascript
[原创]jquery判断元素内容是否为空的方法
2018/05/04 jQuery
浅谈ng-zorro使用心得
2018/12/03 Javascript
单链表反转python实现代码示例
2018/02/08 Python
django自带的server 让外网主机访问方法
2018/05/14 Python
Python动态语言与鸭子类型详解
2019/07/01 Python
用python解压分析jar包实例
2020/01/16 Python
Python实现文件压缩和解压的示例代码
2020/08/12 Python
Python实现自动签到脚本功能
2020/08/20 Python
Python利用imshow制作自定义渐变填充柱状图(colorbar)
2020/12/10 Python
CSS3让登陆面板3D旋转起来
2016/05/03 HTML / CSS
CSS3中引入多种自定义字体font-face
2020/06/12 HTML / CSS
网络艺术零售业的先驱者:artrepublic
2017/09/26 全球购物
美国本地交易和折扣网站:LocalFlavor.com
2017/10/26 全球购物
SHEIN台湾:购买最新流行女装服饰
2019/05/18 全球购物
JSF如何进行表格处理及取值
2012/08/06 面试题
毕业生找工作的求职信范文
2013/12/24 职场文书
市场营销工作计划书
2014/09/15 职场文书
公务员四风问题对照检查材料整改措施
2014/09/26 职场文书
2015年清明节网上祭英烈留言寄语
2015/03/04 职场文书
驾驶员安全责任协议书
2016/03/22 职场文书
mysql timestamp比较查询遇到的坑及解决
2021/11/27 MySQL
十大最强奥特曼武器:怪兽战斗仪在榜,第五奥特之父只使用过一次
2022/03/18 日漫
Python Matplotlib绘制两个Y轴图像
2022/04/13 Python