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创建快捷方式的简单实例
Aug 09 Javascript
jquery submit ie6下失效的原因分析及解决方法
Nov 15 Javascript
jQuery中的pushStack实现原理和应用实例
Feb 03 Javascript
jquery实现简单的二级导航下拉菜单效果
Sep 07 Javascript
js自调用匿名函数的三种写法(推荐)
Aug 19 Javascript
深入浅析JS是按值传递还是按引用传递(推荐)
Sep 18 Javascript
vue.js学习笔记之绑定style样式和class列表
Oct 31 Javascript
jQuery模拟实现天猫购物车动画效果实例代码
May 25 jQuery
详解vue文件中使用echarts.js的两种方式
Oct 18 Javascript
Vue实现商品分类菜单数量提示功能
Jul 26 Javascript
微信小程序实现天气预报功能(附源码)
Dec 10 Javascript
详解Vue3使用axios的配置教程
Apr 29 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
动漫定律:眯眯眼都是怪物!这些角色狠话不多~
2020/03/03 日漫
PHP_Flame(Version:Progress)的原代码
2006/10/09 PHP
PHP错误Parse error: syntax error, unexpected end of file in test.php on line 12解决方法
2014/06/23 PHP
Laravel4中的Validator验证扩展用法详解
2016/07/26 PHP
php实现文件预览功能
2017/05/23 PHP
js汉字转拼音实现代码
2013/02/06 Javascript
jQuery插件分享之分页插件jqPagination
2014/06/06 Javascript
jquery图片倾斜层叠切换特效代码分享
2015/08/27 Javascript
js 右侧浮动层效果实现代码(跟随滚动)
2015/11/22 Javascript
javascript巧用eval函数组装表单输入项为json对象的方法
2015/11/25 Javascript
JS面向对象编程详解
2016/03/06 Javascript
JavaScript 经典实例日常收集整理(常用经典)
2016/03/30 Javascript
Javascript发送AJAX请求实例代码
2016/08/21 Javascript
详解使用Vue.Js结合Jquery Ajax加载数据的两种方式
2017/01/10 Javascript
D3.js进阶系列之CSV表格文件的读取详解
2017/06/06 Javascript
vue 将页面公用的头部组件化的方法
2017/12/18 Javascript
layui 对table中的数据进行转义的实例
2019/09/12 Javascript
webpack是如何实现模块化加载的方法
2019/11/06 Javascript
JsonServer安装及启动过程图解
2020/02/28 Javascript
学前端,css与javascript重难点浅析
2020/06/11 Javascript
React冒泡和阻止冒泡的应用详解
2020/08/18 Javascript
python3 shelve模块的详解
2017/07/08 Python
Python使用googletrans报错的解决方法
2018/09/25 Python
python实现网页自动签到功能
2019/01/21 Python
python ChainMap的使用和说明详解
2019/06/11 Python
Python pip install如何修改默认下载路径
2020/04/29 Python
Sneaker Studio捷克:购买运动鞋
2018/07/08 全球购物
大学三年的自我评价
2013/12/25 职场文书
餐饮部总监岗位职责范文
2014/02/13 职场文书
小学校本培训方案
2014/06/06 职场文书
班主任先进事迹材料
2014/12/17 职场文书
2015驻村干部工作总结
2015/04/07 职场文书
签证工作证明模板
2015/06/15 职场文书
百日宴上的祝酒词
2015/08/10 职场文书
2016年第104个国际护士节活动总结
2016/04/06 职场文书
MySQL pt-slave-restart工具的使用简介
2021/04/07 MySQL