700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > JS获取鼠标点击对象

JS获取鼠标点击对象

时间:2023-05-24 17:55:34

相关推荐

JS获取鼠标点击对象

问题的提出:

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

我用的AJAX是 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

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。