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

2019-11-21 00:55:14

字體：大中小

來源：轉載

供稿：網友

用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對象在多瀏覽器下的兼容性，和上面方式是一樣的，這里代碼就不做說明了

上一篇：javascript實現的textarea運行框效果代碼不用指定id批量指定

下一篇：jMessageBox 基于jQuery的窗口插件