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 相关文章推荐
新页面打开实际尺寸的图片
Aug 25 Javascript
javaScript Array(数组)相关方法简述
Jul 25 Javascript
javascript getElementsByName()的用法说明
Jul 31 Javascript
Javascript 面向对象 继承
May 13 Javascript
JavaScript中使用replace结合正则实现replaceAll的效果
Jun 04 Javascript
客户端 使用XML DOM加载json数据的方法
Sep 28 Javascript
jquery判断浏览器类型的代码
Nov 05 Javascript
javascript中的绑定与解绑函数应用示例
Jun 24 Javascript
js控制input输入字符解析
Dec 27 Javascript
JavaScript实现定时隐藏与显示图片的方法
Aug 06 Javascript
jQuery 3 中的新增功能汇总介绍
Jun 12 Javascript
微信小程序tabBar底部导航中文注解api详解
Aug 16 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
咖啡是不是喝了会上瘾?咖啡是必须品吗!
2021/03/04 新手入门
php mssql 数据库分页SQL语句
2008/12/16 PHP
PHP 编程安全性小结
2010/01/08 PHP
Discuz不使用插件实现简单的打赏功能
2019/03/21 PHP
用jscript实现列出安装的软件列表
2007/06/18 Javascript
JS启动应用程序的一个简单例子
2008/05/11 Javascript
hover的用法及live的用法介绍(鼠标悬停效果)
2013/03/29 Javascript
js实现日历可获得指定日期周数及星期几示例分享(js获取星期几)
2014/03/14 Javascript
SpringMVC框架下JQuery传递并解析Json格式的数据是如何实现的
2015/12/10 Javascript
浅谈angularJS中的事件
2016/07/12 Javascript
AngularJs ng-repeat 嵌套如何获取外层$index
2016/09/21 Javascript
EditPlus中的正则表达式 实战(4)
2016/12/15 Javascript
JavaScript定时器制作弹窗小广告
2017/02/05 Javascript
Vue.js弹出模态框组件开发的示例代码
2017/07/26 Javascript
面包屑导航详解
2017/12/07 Javascript
Vue多系统切换实现方案
2018/06/05 Javascript
[50:38]DOTA2-DPC中国联赛 正赛 Phoenix vs CDEC BO3 第二场 3月7日
2021/03/11 DOTA
Python常用内置函数总结
2015/02/08 Python
Python数据类型学习笔记
2016/01/13 Python
更改Ubuntu默认python版本的两种方法python-> Anaconda
2016/12/18 Python
python使用folium库绘制地图点击框
2018/09/21 Python
python DataFrame转dict字典过程详解
2019/12/26 Python
python实现密度聚类(模板代码+sklearn代码)
2020/04/27 Python
什么是ARP(Address Resolution Protocol)地址解析协议
2013/10/31 面试题
材料成型专业个人求职信范文
2013/09/25 职场文书
化学专业毕业生自荐信
2013/11/15 职场文书
幼儿教师思想汇报
2014/01/10 职场文书
艺术节主持词
2014/04/02 职场文书
做人民满意的公务员活动方案
2014/08/25 职场文书
政府个人对照检查材料
2014/08/28 职场文书
合理化建议书
2015/02/04 职场文书
销售员岗位职责范本
2015/04/11 职场文书
2015初中团支部工作总结
2015/07/21 职场文书
Python常用配置文件ini、json、yaml读写总结
2021/07/09 Python
logback如何自定义日志存储
2021/08/30 Java/Android
字节飞书面试promise.all实现示例
2022/06/16 Javascript