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 相关文章推荐
javascript中删除指定数组中指定的元素的代码
Feb 12 Javascript
js中字符替换函数String.replace()使用技巧
Aug 14 Javascript
JavaScript高级程序设计 事件学习笔记
Sep 10 Javascript
Jquery实现网页跳转或用命令打开指定网页的解决方法
Jul 09 Javascript
javascript判断网页是关闭还是刷新
Sep 12 Javascript
Bootstrap组件学习之导航、标签、面包屑导航(精品)
May 17 Javascript
深入讲解xhr(XMLHttpRequest)/jsonp请求之abort
Jul 26 Javascript
JS获取一个表单字段中多条数据并转化为json格式
Oct 17 Javascript
解决iview多表头动态更改列元素发生的错误的方法
Nov 02 Javascript
Vue3新特性之在Composition API中使用CSS Modules
Jul 13 Javascript
js实现删除json中指定的元素
Sep 22 Javascript
如何在JavaScript中使用localStorage详情
Feb 04 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
用户的详细注册和判断
2006/10/09 PHP
如何使用php绘制在图片上的正余弦曲线
2013/06/08 PHP
php实现TCP端口检测的方法
2015/04/01 PHP
php 数组随机取值的简单实例
2016/05/23 PHP
Javascript实例教程(19) 使用HoTMetal(4)
2006/12/23 Javascript
IE8 浏览器Cookie的处理
2009/01/31 Javascript
jQuery对象[0]是什么含义?
2010/07/31 Javascript
基于Jquery插件开发之图片放大镜效果(仿淘宝)
2011/11/19 Javascript
Javascript全局变量var与不var的区别深入解析
2013/12/09 Javascript
JavaScript监听和禁用浏览器回车事件实例
2015/01/31 Javascript
xmlplus组件设计系列之路由(ViewStack)(7)
2017/05/02 Javascript
使用cropper.js裁剪头像的实例代码
2017/09/29 Javascript
微信小程序ajax实现请求服务器数据及模版遍历数据功能示例
2017/12/15 Javascript
详解webpack多页面配置记录
2018/01/22 Javascript
opencv 识别微信登录验证滑动块位置
2018/08/07 Javascript
在移动端使用vue-router和keep-alive的方法示例
2018/12/02 Javascript
微信小程序学习笔记之文件上传、下载操作图文详解
2019/03/29 Javascript
一篇文章,教你学会Vue CLI 插件开发
2019/04/17 Javascript
使用vue-router在Vue页面之间传递数据的方法
2019/07/15 Javascript
nodejs实现的http、https 请求封装操作示例
2020/02/06 NodeJs
[08:04]TI4西雅图DOTA2前线报道 海涛探访各路人马
2014/07/09 DOTA
python中__call__方法示例分析
2014/10/11 Python
TensorFlow实现Softmax回归模型
2018/03/09 Python
Python编写带选项的命令行程序方法
2019/08/13 Python
解决Atom安装Hydrogen无法运行python3的问题
2019/08/28 Python
PyTorch中torch.tensor与torch.Tensor的区别详解
2020/05/18 Python
阿迪达斯香港官网:adidas香港
2019/11/09 全球购物
房屋租赁意向书
2014/04/01 职场文书
2014年保管员工作总结
2014/11/18 职场文书
优秀党员先进事迹材料
2014/12/18 职场文书
质量整改通知单
2015/04/21 职场文书
本科毕业论文致谢怎么写
2015/05/14 职场文书
廉洁自律心得体会2016
2016/01/13 职场文书
2016应届毕业生自荐信范文
2016/01/28 职场文书
Golang Gob编码(gob包的使用详解)
2021/05/07 Golang
PostgreSQL之连接失败的问题及解决
2023/05/08 PostgreSQL