JS获取鼠标点击对象

问题的提出:

在一个用户列表中,当点击用户时候,弹出这个用户的详细信息,怎么做?当然了,如果你想弹出一个新页面,那就算求了,就不用看这个,这个时候如果弹出一个新页面,就是说会向服务器回发一次,速度就降低了撒,使用最好是直接弹出一个层,然后在这个层里面现实这个人的详细信息。而这个层你不会让人家固定在一个地方撒?对不对?好,那你就要去获取你点击的地方的X,Y坐标了,但是这样不行啊,你得指定一个地方啊,如果乱点把这个层弹出来就恼火了撒,所以,咱们就指定只能在一个按钮上点击才会弹出这个层,那么现在你就要去获取这个按钮的ID了,这样来间接的获取这个按钮的X,Y坐标,因为如果直接用ClientX与ClientY 的话,也不太美观,要求是对于一条记录,在指定位置弹出。

我用的AJAX是ASP.NET AJAX,简单,首先简历一个层,托一个UPDATEPANEL上去,然后再整一个FORMVIEW,当然了,还是稍微美化一下哈,不然有点难看。

顺便看看获取点击对象的ID,简单:var ID = event.srcElement.ID就可以了。

然后再去获得这个对象的绝对坐标,怎么去获得绝对坐标?

JS里面给我们提供的函数只有offsetTop 喝offsetLeft这样的东西,但是这个值是指定对象相对于上层控件的距离,这样得到的位置不是相对于屏幕的绝对位置

所以我们只能循环获取,知道这个对象为最外层的对象,那才得到了对于屏幕的绝对坐标

function   getAbsPoint(ID)   
{   
    var   x   =   ID.offsetLeft,   y   =   ID.offsetTop;   
    while(ID==.offsetParent) 
    { 
       x   +=   ID.offsetLeft;   
       y   +=   ID.offsetTop;
    }

这样我们就获取这个指定ID属性相对于屏幕的绝对坐标。

还有一种方法,

function   getAbsPoint(obj)   
{   
   var   x,y;   
   oRect   =   obj.getBoundingClientRect();   
   x=oRect.left;   
   y=oRect.top;    
}

这种方法要简单些,不过有时候取得的坐标值不稳定,原因不晓得,所以我就用的第一种方法,好了

获得了这个对象的X,Y绝对坐标后,后面定位层的位置你就晓得该囊个做了撒?

document.getElementById("div1").style.left = x;

当然了,这个层的position肯定是absolute,不然界面就难看了。


    alert("x:"+x+","+"y:"+y);  

顺便整几个JS常用函数

JS中获得窗口属性的方法 

1。获得屏幕的分辨率: 
screen.width 
screen.height 

2。获得窗口大小: 
document.body.clientWidth 
document.body.clientHeight 

3。获得窗口大小(包含Border、Scroll等元素) 
document.body.offsetWidth 
document.body.offsetHeight  

原文地址:https://www.cnblogs.com/elleniou/p/3081142.html