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  


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM