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 相关文章推荐
dojo 之基础篇(二)之从服务器读取数据
Mar 24 Javascript
JavaScript 动态将数字金额转化为中文大写金额
May 14 Javascript
获取HTML DOM节点元素的方法的总结
Aug 21 Javascript
基于JQuery 的消息提示框效果代码
Jul 31 Javascript
利用jquery的获取JS文件中的字符串内容
Feb 14 Javascript
基于jQuery实现仿搜狐辩论投票动画代码(附源码下载)
Feb 18 Javascript
【JS+CSS3】实现带预览图幻灯片效果的示例代码
Mar 17 Javascript
炫酷的js手风琴效果
Oct 13 Javascript
Bootstrap CSS布局之代码
Dec 17 Javascript
基于Vue开发数字输入框组件
Dec 19 Javascript
jquery html添加元素/删除元素操作实例详解
May 20 jQuery
解决vue watch数据的方法被调用了两次的问题
Nov 07 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
《五等分的花嫁》漫画完结!2020年10月第2期TV动画制作组换血!
2020/03/06 日漫
dedecms后台验证码总提示错误的解决方法
2007/03/21 PHP
php将数据库中的电话号码读取出来并生成图片
2008/08/31 PHP
thinkPHP学习笔记之安装配置篇
2015/03/05 PHP
yii2 commands模式以及配置crontab定时任务的方法
2017/08/19 PHP
PHP使用file_get_contents发送http请求功能简单示例
2018/04/29 PHP
JavaScript中的property和attribute介绍
2011/12/26 Javascript
自动设置iframe大小的jQuery代码
2013/09/11 Javascript
jQuery之过滤元素操作小结
2013/11/30 Javascript
js中window.open打开一个新的页面
2014/08/10 Javascript
jQuery中;function($,undefined) 前面的分号的用处
2014/12/17 Javascript
如何用javascript计算文本框还能输入多少个字符
2015/07/29 Javascript
JavaScript编写检测用户所使用的浏览器的代码示例
2016/05/05 Javascript
浅谈javascript alert和confirm的美化
2016/12/15 Javascript
BootStrap daterangepicker 双日历控件
2017/06/02 Javascript
Angular4学习笔记之新建项目的方法
2017/07/18 Javascript
es7学习教程之Decorators(修饰器)详解
2017/07/21 Javascript
Angular 实现输入框中显示文章标签的实例代码
2018/11/07 Javascript
解决Layui中templet中a的onclick参数传递的问题
2019/09/20 Javascript
JavaScript图片旋转效果实现方法详解
2020/06/28 Javascript
浅谈vue中使用编辑器vue-quill-editor踩过的坑
2020/08/03 Javascript
从零学python系列之浅谈pickle模块封装和拆封数据对象的方法
2014/05/23 Python
50行Python代码获取高考志愿信息的实现方法
2019/07/23 Python
python爬虫 execjs安装配置及使用
2019/07/30 Python
基于pytorch的lstm参数使用详解
2020/01/14 Python
Pycharm激活方法及详细教程(详细且实用)
2020/05/12 Python
在echarts中图例legend和坐标系grid实现左右布局实例
2020/05/16 Python
python简单实现插入排序实例代码
2020/12/16 Python
HTML5 FileReader对象的具体使用方法
2020/05/22 HTML / CSS
Intimissimi德国网上商店:意大利知名内衣品牌
2018/04/03 全球购物
eBay意大利购物网站:eBay.it
2019/09/04 全球购物
电子商务毕业生求职信
2013/11/10 职场文书
证婚人搞笑证婚词
2014/01/10 职场文书
单位委托函范文
2015/01/29 职场文书
加班费申请报告
2015/05/15 职场文书
厉害!这是Redis可视化工具最全的横向评测
2021/07/15 Redis