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 相关文章推荐
飞鱼(shqlsl) javascript作品集
Dec 16 Javascript
javaScript 利用闭包模拟对象的私有属性
Dec 29 Javascript
javascript截取字符串小结
Apr 28 Javascript
JS选中checkbox后获取table内一行TD所有数据的方法
Jul 01 Javascript
基于Jquery和CSS3制作数字时钟附源码下载(CSS3篇)
Nov 24 Javascript
js判断主流浏览器类型和版本号的简单实现代码
May 26 Javascript
Bootstrap自动适应PC、平板、手机的Bootstrap栅格系统
May 27 Javascript
angularJS1 url中携带参数的获取方法
Oct 09 Javascript
JavaScript实现邮箱后缀提示功能的示例代码
Dec 13 Javascript
如何通过javaScript去除字符串两端的空白字符
Feb 06 Javascript
JS操作Fckeditor的一些常用方法(获取、插入等)
Feb 19 Javascript
js 将多个对象合并成一个对象 assign方法的实现
Sep 24 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
Yii遍历行下每列数据的方法
2016/10/17 PHP
laravel5.4生成验证码的实例讲解
2017/08/05 PHP
Laravel框架实现的记录SQL日志功能示例
2018/06/19 PHP
php使用fputcsv实现大数据的导出操作详解
2020/02/27 PHP
phpstorm最新激活码分享亲测phpstorm2020.2.3版可用
2020/11/22 PHP
JavaScript 匿名函数(anonymous function)与闭包(closure)
2011/10/04 Javascript
js中top/parent/frame概述及案例应用
2013/02/06 Javascript
jQuery.validate 常用方法及需要注意的问题
2013/03/20 Javascript
IE下JS读取xml文件示例代码
2013/08/05 Javascript
完美解决AJAX跨域问题
2013/11/01 Javascript
基于jQuery实现的文字按钮表单特效整理
2014/12/07 Javascript
在JS中操作时间之getUTCMilliseconds()方法的使用
2015/06/10 Javascript
jQuery的bind()方法使用详解
2015/07/15 Javascript
javascript实现密码验证
2015/11/10 Javascript
js中实现字符串和数组的相互转化详解
2016/01/24 Javascript
EasyUi combotree 实现动态加载树节点
2016/04/01 Javascript
Web打印解决方案之证件套打的实现思路
2016/08/29 Javascript
微信小程序 中wx.chooseAddress(OBJECT)实例详解
2017/03/31 Javascript
vue实现简单loading进度条
2018/06/06 Javascript
手写Vue弹窗Modal的实现代码
2019/09/11 Javascript
vue实现数字滚动效果
2020/06/29 Javascript
浅谈vue生命周期共有几个阶段?分别是什么?
2020/08/07 Javascript
[39:18]完美世界DOTA2联赛PWL S3 Forest vs LBZS 第二场 12.17
2020/12/19 DOTA
Python File readlines() 使用方法
2018/03/19 Python
python按比例随机切分数据的实现
2019/07/11 Python
PyTorch加载自己的数据集实例详解
2020/03/18 Python
Python基于mediainfo批量重命名图片文件
2020/12/29 Python
如何在Canvas中添加事件的方法示例
2019/05/21 HTML / CSS
印尼在线购买隐形眼镜网站:Lensza.co.id
2019/04/27 全球购物
奶茶店创业计划书范文
2014/01/17 职场文书
挂科检讨书范文
2014/02/20 职场文书
行政部工作岗位职责范本
2014/03/05 职场文书
合伙经营协议书范本(通用版)
2014/12/03 职场文书
公司财务部岗位职责
2015/04/14 职场文书
python基于OpenCV模板匹配识别图片中的数字
2021/03/31 Python