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 相关文章推荐
JS 巧妙获取剪贴板数据 Excel数据的粘贴
Jul 09 Javascript
学习ExtJS fit布局使用说明
Oct 08 Javascript
基于jquery完美拖拽,可返回拖动轨迹
Mar 29 Javascript
打造个性化的功能强大的Jquery虚拟键盘(VirtualKeyboard)
Oct 11 Javascript
js防止页面被iframe调用的方法
Oct 30 Javascript
jQuery动画与特效详解
Feb 01 Javascript
Bootstrap学习系列之使用 Bootstrap Typeahead 组件实现百度下拉效果
Jul 07 Javascript
jQuery得到多个值只能用取Class ,不能用取ID的方法
Dec 04 Javascript
Javascript实现信息滚动效果
May 18 Javascript
vue-router 实现导航守卫(路由卫士)的实例代码
Sep 02 Javascript
微信小程序实现多行文字超出部分省略号显示功能
Oct 23 Javascript
基于VSCode调试网页JavaScript代码过程详解
Jul 20 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生成二维码的两个方法和实例
2014/07/01 PHP
一些主流JS框架中DOMReady事件的实现小结
2011/02/12 Javascript
淘宝网提供的国内NPM镜像简介和使用方法
2014/04/17 Javascript
jquery让指定的元素闪烁显示的方法
2015/03/17 Javascript
JavaScript的事件代理和委托实例分析
2015/03/25 Javascript
jQuery解析XML文件同时动态增加js文件的方法
2015/06/01 Javascript
JavaScript定时器和优化的取消定时器方法
2015/07/03 Javascript
javascript实现tab切换的四种方法
2015/11/05 Javascript
原生js实现简单的链式操作
2017/07/04 Javascript
Javascript中的getter和setter初识
2017/08/17 Javascript
BootStrap Table实现server分页序号连续显示功能(当前页从上一页的结束序号开始)
2017/09/12 Javascript
vue如何进行动画的封装
2018/09/26 Javascript
Node.js Windows Binary二进制文件安装方法
2019/05/16 Javascript
vue分页器组件编写方法详解
2019/06/28 Javascript
基于Vue sessionStorage实现保留搜索框搜索内容
2020/06/01 Javascript
Python使用Mechanize模块编写爬虫的要点解析
2016/03/31 Python
python获取当前用户的主目录路径方法(推荐)
2017/01/12 Python
Python pandas.DataFrame调整列顺序及修改index名的方法
2019/06/21 Python
python rsa实现数据加密和解密、签名加密和验签功能
2019/09/18 Python
Django 实现Admin自动填充当前用户的示例代码
2019/11/18 Python
numpy:np.newaxis 实现将行向量转换成列向量
2019/11/30 Python
Python timer定时器两种常用方法解析
2020/01/20 Python
python3 使用openpyxl将mysql数据写入xlsx的操作
2020/05/15 Python
家得宝墨西哥官网:The Home Depot墨西哥
2019/11/18 全球购物
护士实习自我鉴定
2013/10/22 职场文书
网络维护管理员的自我评价分享
2013/11/11 职场文书
售票员岗位职责
2015/02/15 职场文书
2015最新学生自我评价范文
2015/03/03 职场文书
史上最牛辞职信
2015/05/13 职场文书
热血教师观后感
2015/06/10 职场文书
2015暑期爱心支教策划书
2015/07/14 职场文书
2015年中秋寄语
2015/07/31 职场文书
自考生自我评价
2019/06/21 职场文书
五年级作文之学校的四季
2019/12/05 职场文书
python3美化表格数据输出结果的实现代码
2021/04/14 Python
《月歌。》宣布制作10周年纪念剧场版《RABBITS KINGDOM THE MOVIE》
2022/04/02 日漫