获得鼠标的坐标值

一、需求:

1、当需求为获得的坐标值相对于body时实现方法

2、当需求为获得的坐标值相对于某一对象时实现方法

 

二、实现:
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; 

}
三、实例下载:

       点击这里

 

 

四、如果有更好的方法,可以的话 ,相互交流下,共同进步!

 

 

 

 

 

 

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值