js获得鼠标的坐标值的方法

更新时间：2013年03月13日 14:28:13 作者：

js获得鼠标的坐标值的方法，需要的朋友可以参考一下

复制代码代码如下:

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 forEach函数实现代码
在Base2中找到一个叫forEach的函数，是我见过的最好的实现。挖出来分析一下。它能对各种普通对象，字符串，数组以及类数组进行遍历。如果原游览器的对象已实现此函数，它则调用原对象的函数。
2010-01-01
JS中cookie的使用及缺点讲解
Cookie就是这样的一种机制。它可以弥补HTTP协议无状态的不足。在Session出现之前，基本上所有的网站都采用Cookie来跟踪会话。下面通过本文给大家介绍JS中cookie的使用及缺点，需要的朋友参考下吧
2017-05-05
JavaScript常用工具函数库汇总
业务中比较常用的JavaScript工具函数，可以用在前端环境，也可以用在node服务端，统一整理，方便查阅，帮助大家更好的理解和使用JavaScript，感兴趣的朋友可以了解下
2020-09-09
基于javascript实现日历功能原理及代码实例
这篇文章主要介绍了基于javascript实现日历效果原理及代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2020-05-05
JavaScript模拟实现网易云轮播效果
这篇文章主要介绍了如何利用JavaScript模仿网易云轮播效果的实现，文中的示例代码讲解详细，对我们学习有一定帮助，需要的可以参考一下
2022-04-04
微信小程序实现列表项左滑删除效果
这篇文章主要为大家详细介绍了微信小程序实现列表项左滑删除效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-08-08
javascript if 的简化代码
a=0 if(a<1)alert(a),alert(1-a) VS if(a==0){alert(a);alert(1-a)}
2008-02-02
JavaScript实现审核流程状态的动态显示进度条
对于有很多流程的东西，我们希望能够根据不同的阶段，用流程条对应地进行显示，非常直观，给用户带来极好的用户体验，下面小编给大家分享JavaScript实现审核流程状态的动态显示进度条功能，需要的的朋友参考下
2017-03-03
微信小程序3D轮播实现代码
这篇文章主要介绍了微信小程序3D轮播实现代码,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2019-09-09
Javascript面象对象成员、共享成员变量实验
Javascript 面象对象成员、共享成员变量实验，需要的朋友可以参考下。
2010-11-11