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 相关文章推荐
msn上的tab功能Firefox对childNodes处理的一个BUG
Jan 21 Javascript
分享27款非常棒的jQuery 表单插件
Mar 28 Javascript
jQuery 瀑布流 绝对定位布局(二)(延迟AJAX加载图片)
May 23 Javascript
简单的jQuery banner图片轮播实例代码
Mar 04 Javascript
jQuery+ajax简单实现文件上传的方法
Jun 03 Javascript
微信小程序 向左滑动删除功能的实现
Mar 10 Javascript
Angular实现双向折叠列表组件的示例代码
Nov 21 Javascript
vue移动端弹框组件的实例
Sep 25 Javascript
小程序分享模块超级详解(推荐)
Apr 10 Javascript
微信小程序后端实现授权登录
Feb 24 Javascript
详解在Vue.js编写更好的v-for循环的6种技巧
Apr 14 Javascript
js实现磁性吸附的示例
Oct 26 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
web方式ftp
2006/10/09 PHP
简单的PHP留言本实例代码
2010/05/09 PHP
php从完整文件路径中分离文件目录和文件名的方法
2015/03/13 PHP
在WordPress的后台中添加顶级菜单和子菜单的函数详解
2016/01/11 PHP
php指定长度分割字符串str_split函数用法示例
2017/01/30 PHP
PHP基于正则批量替换Img中src内容实现获取缩略图的功能示例
2017/06/07 PHP
jQuery照片伸缩效果不影响其他元素的布局
2014/05/09 Javascript
JavaScript 学习笔记之操作符(续)
2015/01/14 Javascript
JavaScript中操作字符串之localeCompare()方法的使用
2015/06/06 Javascript
浅谈jQuery.easyui的datebox格式化时间
2015/06/25 Javascript
javascript实现列表切换效果
2016/05/02 Javascript
BootStrap 智能表单实战系列(二)BootStrap支持的类型简介
2016/06/13 Javascript
jquery mobile 实现自定义confirm确认框效果的简单实例
2016/06/17 Javascript
妙用Bootstrap的 popover插件实现校验表单提示功能
2016/08/29 Javascript
Angular工具方法学习
2016/12/26 Javascript
详解Angular2表单-模板驱动的表单(Template-Driven Forms)
2017/08/04 Javascript
使用DataTable插件实现异步加载数据
2017/11/19 Javascript
nuxt.js 缓存实践
2018/06/25 Javascript
vue如何获取自定义元素属性参数值的方法
2019/05/14 Javascript
VUE路由动态加载实例代码讲解
2019/08/26 Javascript
Electron 打包问题:electron-builder 下载各种依赖出错(推荐)
2020/07/09 Javascript
Python 时间操作例子和时间格式化参数小结
2014/04/24 Python
Python设计模式编程中Adapter适配器模式的使用实例
2016/03/02 Python
python中闭包Closure函数作为返回值的方法示例
2017/12/17 Python
Python打包工具PyInstaller的安装与pycharm配置支持PyInstaller详细方法
2020/02/27 Python
Python特殊属性property原理及使用方法解析
2020/10/09 Python
凯撒娱乐:Caesars Entertainment
2018/02/23 全球购物
绘画设计学生的个人自我评价
2013/09/20 职场文书
管道维修工岗位职责
2013/12/27 职场文书
工作交流会欢迎词
2014/01/12 职场文书
董事长秘书职责
2014/01/31 职场文书
文秘应聘自荐书范文
2014/02/18 职场文书
喝酒检查书范文
2014/02/23 职场文书
文明班集体申报材料
2014/05/23 职场文书
银行给客户的感谢信
2015/01/23 职场文书
2015年秋季运动会广播稿
2015/08/19 职场文书