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 相关文章推荐
MooTools 1.2介绍
Sep 14 Javascript
JavaScript几种形式的树结构菜单
May 10 Javascript
javascript通过navigator.userAgent识别各种浏览器
Oct 25 Javascript
JSON.parse()和JSON.stringify()使用介绍
Jun 20 Javascript
sails框架的学习指南
Dec 22 Javascript
jQuery遍历页面所有CheckBox查看是否被选中的方法
Apr 14 Javascript
Node.js+jade抓取博客所有文章生成静态html文件的实例
Sep 19 Javascript
原生JS获取元素的位置与尺寸实现方法
Oct 18 Javascript
vue2+el-menu实现路由跳转及当前项的设置方法实例
Nov 07 Javascript
jquery如何实现点击空白处隐藏元素
Dec 05 jQuery
Vue封装全局过滤器Filters的步骤
Sep 16 Javascript
微信小程序入门之绘制时钟
Oct 22 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 ob_flush,flush在ie中缓冲无效的解决方法
2010/05/09 PHP
PHP Curl多线程原理实例详解
2013/11/06 PHP
PHP中比较两个字符串找出第一个不同字符位置例子
2014/04/08 PHP
CI框架中zip类应用示例
2014/06/17 PHP
PHP的mysqli_query参数MYSQLI_STORE_RESULT和MYSQLI_USE_RESULT的区别
2014/09/29 PHP
PHP 出现 http500 错误的解决方法
2021/03/09 PHP
JavaScript入门教程(8) Location地址对象
2009/01/31 Javascript
JavaScript去掉空格的方法集合
2010/12/28 Javascript
jQuery基本过滤选择器使用介绍
2013/04/18 Javascript
html的DOM中document对象images集合用法实例
2015/01/21 Javascript
HTML页面定时跳转方法解析(2种任选)
2016/12/22 Javascript
原生JS实现九宫格抽奖效果
2017/04/01 Javascript
JavaScript实现短暂提示框功能
2018/04/04 Javascript
vue2.0 实现富文本编辑器功能
2019/05/26 Javascript
ElementUI Tree 树形控件的使用并给节点添加图标
2020/02/27 Javascript
[59:08]DOTA2上海特级锦标赛C组小组赛#2 LGD VS Newbee第一局
2016/02/27 DOTA
Python入门之modf()方法的使用
2015/05/15 Python
python文件的md5加密方法
2016/04/06 Python
python向已存在的excel中新增表,不覆盖原数据的实例
2018/05/02 Python
python 识别图片中的文字信息方法
2018/05/10 Python
Python转换时间的图文方法
2019/07/01 Python
Python编程实现tail-n查看日志文件的方法
2019/07/08 Python
python离线安装外部依赖包的实现
2020/02/13 Python
细说NumPy数组的四种乘法的使用
2020/12/18 Python
24个canvas基础知识小结
2014/12/17 HTML / CSS
详解使用HTML5 Canvas创建动态粒子网格动画
2016/12/14 HTML / CSS
Vrbo西班牙:预订您的度假公寓(公寓、乡村房屋…)
2020/04/27 全球购物
深圳茁壮笔试题
2015/05/28 面试题
小学生作文评语大全
2014/04/21 职场文书
竞选大队长演讲稿
2014/04/29 职场文书
文化建设工作方案
2014/05/12 职场文书
学校创先争优活动总结
2014/08/28 职场文书
2014-2015学年工作总结
2014/11/27 职场文书
2014年远程教育工作总结
2014/12/09 职场文书
品德与社会教学反思
2016/02/24 职场文书
几款流行的HTML5 UI框架比较(小结)
2021/04/08 HTML / CSS