用javascript擷取當頁面上滑鼠游標位置和觸發事件的對象的代碼

來源:互聯網
上載者:User

用javascript擷取滑鼠位置: 複製代碼 代碼如下:function mousePosition(ev) {
if (ev.pageX || ev.pageY) {
return {
x: ev.pageX,

y: ev.pageY
};
}
return {
x: ev.clientX + document.body.scrollLeft - document.body.clientLeft,

y: ev.clientY + document.body.scrollTop - document.body.clientTop
};
}

document.onmousemove = mouseMove;
function mouseMove(ev){
ev = ev || window.event;
var mousePos = mousePosition(ev);
}

關於代碼的詳細說明,原文中已經介紹,現轉到此處:
我們首先要聲明一個 evnet 對象,無論移動、點擊、按鍵等,都會啟用一個 evnet ,在 Internet Explorer 裡, event 是全域變數,會被儲存在 window.event 裡. 在 firefox 或者其他瀏覽器,event 會被相應的函數擷取.當我們將mouseMove函數賦值於document.onmousemove,mouseMove 會擷取滑鼠移動事件。
為了讓 ev 在所有瀏覽器下擷取了 event 事件,在Firefox下"||window.event"將不起作用,因為ev已經有了賦值。在 MSIE 中 ev 為空白,所以得到 window.event 。
因為在這篇文章中我們需要多次擷取滑鼠位置,所以我們設計了一個 mousePosition 函數,它包含一個參數 : event 。
因為我們要在 MSIE 和其他瀏覽器下運行,Firefox 和其他瀏覽器用 event.pageX 和 event.pageY 來表示滑鼠相對於文檔的位置,如果你有一個 500*500 的視窗並且你的滑鼠在絕對中間,那麼 pageX 和 pageY 的值都是 250,如果你向下滾動 500, 那麼 pageY 將變成 750。
MSIE 正好相反,它使用 event.clientX 和 event.clientY 表示滑鼠相當於視窗的位置,而不是文檔。在同樣的例子中,如果你向下滾動500,clientY 依然是 250,因此,我們需要添加 scrollLeft 和 scrollTop 這兩個相對於文檔的屬性。最後,MSIE 中文檔並不是從 0,0 開始,而是通常有一個小的邊框(通常是 2 象素),邊框的大小定義在 document.body.clientLeft 和 clientTop 中,我們也把這些加進去。
很幸運,我們現在已經用 mousePosition 函數解決了座標問題,不需為此費心了。

用javascript擷取觸發事件的對象 複製代碼 代碼如下:<script language = "javascript" >
document.onclick = onClick;
function onClick(ev)
{
ev = ev || window.event; // 事件
var target = ev.target || ev.srcElement; // 獲得事件來源
/* target.getAttribute()是擷取該事件來源對像裡面的一些屬性。
比如對像中有(name,id,type等等);*/
var dragObj = target.getAttribute('id');
alert(dragObj);
}
</ script >

關鍵還是event對象在多瀏覽器下的相容性,和上面方式是一樣的,這裡代碼就不做說明了

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.