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代码
Dec 09 Javascript
jQuery中after的两种用法实例
Jul 03 Javascript
jquery表单验证框架提供的身份证验证方法(示例代码)
Dec 27 Javascript
jQuery中odd选择器的定义和用法
Dec 23 Javascript
js完美解决IE6不支持position:fixed的bug
Apr 24 Javascript
Bootstrap~多级导航(级联导航)的实现效果【附代码】
Mar 08 Javascript
js判断所有表单项不为空则提交表单的实现方法
Sep 09 Javascript
Jquery删除css属性的简单方法
Dec 04 Javascript
bootstrap常用组件之头部导航实现代码
Apr 20 Javascript
微信小程序getPhoneNumber获取用户手机号
Sep 29 Javascript
简单谈谈CommonsChunkPlugin抽取公共模块
Dec 31 Javascript
layui表格内放置图片,并点击放大的实例
Sep 10 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 discuz 主题表和回帖表的设计
2009/03/13 PHP
php和asp语法上的区别总结
2019/05/12 PHP
鼠标滑在标题上显示图片的JS代码
2013/11/19 Javascript
javascript实现下拉提示选择框
2015/12/29 Javascript
Node.js服务器环境下使用Mock.js拦截AJAX请求的教程
2016/05/23 Javascript
基于Bootstrap实现tab标签切换效果
2020/04/15 Javascript
Vue.JS入门教程之自定义指令
2016/12/08 Javascript
原生js编写焦点图效果
2016/12/08 Javascript
JS实现搜索框文字可删除功能
2016/12/28 Javascript
浅析JavaScript中的特殊数据类型
2017/12/15 Javascript
Node.js操作系统OS模块用法分析
2019/01/04 Javascript
解决vue打包后vendor.js文件过大问题
2019/07/03 Javascript
浅谈Vue.set实际上是什么
2019/10/17 Javascript
vue 监听 Treeselect 选择项的改变操作
2020/08/31 Javascript
[01:03:59]2018DOTA2亚洲邀请赛3月30日 小组赛B组VGJ.T VS Secret
2018/03/31 DOTA
python基础教程之lambda表达式使用方法
2014/02/12 Python
Python下的常用下载安装工具pip的安装方法
2015/11/13 Python
谈谈Python进行验证码识别的一些想法
2016/01/25 Python
python自动翻译实现方法
2016/05/28 Python
使用Python实现博客上进行自动翻页
2017/08/23 Python
使用Python opencv实现视频与图片的相互转换
2019/07/08 Python
在Python中等距取出一个数组其中n个数的实现方式
2019/11/27 Python
Python闭包装饰器使用方法汇总
2020/06/29 Python
一款基于css3麻将筛子3D翻转特效的实例教程
2014/12/31 HTML / CSS
利用CSS3实现的文字定时向上滚动
2016/08/29 HTML / CSS
HTML5新特性之用SVG绘制微信logo
2016/02/03 HTML / CSS
利用canvas实现图片压缩的示例代码
2018/07/17 HTML / CSS
蟋蟀的住宅教学反思
2014/04/26 职场文书
精彩的演讲稿开头
2014/05/08 职场文书
公司经理任命书
2014/06/05 职场文书
重阳节活动总结
2014/08/27 职场文书
2015年人力资源部工作总结
2015/04/30 职场文书
企业党建工作总结2015
2015/05/26 职场文书
人与自然的观后感
2015/06/18 职场文书
如何起草一份正确的合伙创业协议书?
2019/07/04 职场文书
2019年最新借条范本!
2019/07/08 职场文书