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 判断控件获得焦点的示例代码
Mar 04 Javascript
jquery调取json数据实现省市级联的方法
Jan 29 Javascript
Angular中$compile源码分析
Jan 28 Javascript
ES6的新特性概览
Mar 10 Javascript
javascript基础知识
Jun 07 Javascript
jquery UI Datepicker时间控件冲突问题解决
Dec 16 Javascript
原生js实现焦点轮播图效果
Jan 12 Javascript
javascript基础知识之html5轮播图实例讲解(44)
Feb 17 Javascript
纯JS实现的读取excel文件内容功能示例【支持所有浏览器】
Jun 23 Javascript
基于canvas实现手写签名(vue)
May 21 Javascript
搭建vscode+vue环境的详细教程
Aug 31 Javascript
vue打包时去掉所有的console.log
Apr 10 Vue.js
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/12/13 PHP
如何使用PHP实现javascript的escape和unescape函数
2013/06/29 PHP
PHP自定session保存路径及删除、注销与写入的方法
2014/11/18 PHP
解析PHP的Yii框架中cookie和session功能的相关操作
2016/03/17 PHP
ThinkPHP框架实现的微信支付接口开发完整示例
2019/04/10 PHP
PHP cookie与session会话基本用法实例分析
2019/11/18 PHP
Javascript模板技术
2007/04/27 Javascript
Javascript实现的鼠标经过时播放声音
2010/05/18 Javascript
javascript实现的DES加密示例
2013/10/30 Javascript
javascript制作2048游戏
2015/03/30 Javascript
JavaScript+html5 canvas制作色彩斑斓的正方形效果
2016/01/27 Javascript
浅谈js图片前端预览之filereader和window.URL.createObjectURL
2016/06/30 Javascript
浅谈js中子页面父页面方法 变量相互调用
2016/08/04 Javascript
JavaScript中省略元素对数组长度的影响
2016/10/26 Javascript
详解JavaScript中的属性和特性
2016/12/08 Javascript
js实现彩色条纹滚动条效果
2017/03/15 Javascript
AngularJs导出数据到Excel的示例代码
2017/08/11 Javascript
Angular ui-roter 和AngularJS 通过 ocLazyLoad 实现动态(懒)加载模块和依赖
2018/11/25 Javascript
JS html事件冒泡和事件捕获操作示例
2019/05/01 Javascript
layui自己添加图片按钮并点击跳转页面的例子
2019/09/14 Javascript
JavaScript实现PC端四格密码输入框功能
2020/02/19 Javascript
nodejs使用socket5进行代理请求的实现
2020/02/21 NodeJs
js调用网络摄像头的方法
2020/12/05 Javascript
解决python写的windows服务不能启动的问题
2014/04/15 Python
跟老齐学Python之使用Python操作数据库(1)
2014/11/25 Python
利用Psyco提升Python运行速度
2014/12/24 Python
python重要函数eval多种用法解析
2020/01/14 Python
django filter过滤器实现显示某个类型指定字段不同值方式
2020/07/16 Python
实例教程 纯CSS3打造非常炫的加载动画效果
2014/11/05 HTML / CSS
websocket+sockjs+stompjs详解及实例代码
2018/11/30 HTML / CSS
Quiksilver荷兰官方网站:冲浪和滑雪板
2019/11/16 全球购物
Java 中访问数据库的步骤?Statement 和PreparedStatement 之间的区别?
2012/06/05 面试题
人力资源主管职责范本
2014/03/05 职场文书
社区党建工作汇报材料
2014/08/14 职场文书
2014年科普工作总结
2014/12/06 职场文书
Python中22个万用公式的小结
2021/07/21 Python