用javascript獲取當頁面上鼠標光標位置和觸發(fā)事件的對象的代碼
更新時間:2009年12月09日 20:56:20 作者:
用 javascript 獲取當頁面上鼠標(光標)位置 和 觸發(fā)事件的對象 的方法
用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);
}
關于代碼的詳細說明,原文中已經介紹,現(xiàn)轉到此處:
我們首先要聲明一個 evnet 對象,無論移動、點擊、按鍵等,都會激活一個 evnet ,在 Internet Explorer 里, event 是全局變量,會被存儲在 window.event 里. 在 firefox 或者其他瀏覽器,event 會被相應的函數獲?。斘覀儗ouseMove函數賦值于document.onmousemove,mouseMove 會獲取鼠標移動事件。
為了讓 ev 在所有瀏覽器下獲取了 event 事件,在Firefox下"||window.event"將不起作用,因為ev已經有了賦值。在 MSIE 中 ev 為空,所以得到 window.event 。
因為在這篇文章中我們需要多次獲取鼠標位置,所以我們設計了一個 mousePosition 函數,它包含一個參數 : event 。
因為我們要在 MSIE 和其他瀏覽器下運行,F(xiàn)irefox 和其他瀏覽器用 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 中,我們也把這些加進去。
很幸運,我們現(xiàn)在已經用 mousePosition 函數解決了坐標問題,不需為此費心了。
用javascript獲取觸發(fā)事件的對象
<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對象在多瀏覽器下的兼容性,和上面方式是一樣的,這里代碼就不做說明了
復制代碼 代碼如下:
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);
}
關于代碼的詳細說明,原文中已經介紹,現(xiàn)轉到此處:
我們首先要聲明一個 evnet 對象,無論移動、點擊、按鍵等,都會激活一個 evnet ,在 Internet Explorer 里, event 是全局變量,會被存儲在 window.event 里. 在 firefox 或者其他瀏覽器,event 會被相應的函數獲?。斘覀儗ouseMove函數賦值于document.onmousemove,mouseMove 會獲取鼠標移動事件。
為了讓 ev 在所有瀏覽器下獲取了 event 事件,在Firefox下"||window.event"將不起作用,因為ev已經有了賦值。在 MSIE 中 ev 為空,所以得到 window.event 。
因為在這篇文章中我們需要多次獲取鼠標位置,所以我們設計了一個 mousePosition 函數,它包含一個參數 : event 。
因為我們要在 MSIE 和其他瀏覽器下運行,F(xiàn)irefox 和其他瀏覽器用 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 中,我們也把這些加進去。
很幸運,我們現(xiàn)在已經用 mousePosition 函數解決了坐標問題,不需為此費心了。
用javascript獲取觸發(fā)事件的對象
復制代碼 代碼如下:
<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對象在多瀏覽器下的兼容性,和上面方式是一樣的,這里代碼就不做說明了
您可能感興趣的文章:
- js 觸發(fā)select onchange事件代碼
- 代碼觸發(fā)js事件(click、change)示例應用
- js獲取觸發(fā)事件元素在整個網頁中的絕對坐標(示例代碼)
- javascript 動態(tài)改變onclick事件觸發(fā)函數代碼
- JavaScript 動態(tài)添加腳本,并觸發(fā)回調函數的實現(xiàn)代碼
- 文本框中,回車鍵觸發(fā)事件的js代碼[多瀏覽器兼容]
- 用按鈕觸發(fā)Javascript動態(tài)生成一個表格的代碼
- FireFox與IE 下js兼容觸發(fā)click事件的代碼
- 鼠標放上去觸發(fā)一個javascript提示框效果代碼
- UpdatePanel觸發(fā)javascript腳本的方法附代碼
- JS代碼觸發(fā)事件代碼實例
相關文章
js利用appendChild對<li>標簽進行排序的實現(xiàn)方法
下面小編就為大家?guī)硪黄猨s利用appendChild對<li>標簽進行排序的實現(xiàn)方法。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-10-10javascript實現(xiàn)判斷鼠標的狀態(tài)
這篇文章主要介紹了javascript實現(xiàn)判斷鼠標的狀態(tài)的相關代碼,十分簡單實用,有需要的小伙伴可以參考下。2015-07-07JavaScript動畫實例之粒子文本的實現(xiàn)方法詳解
這篇文章主要介紹了JavaScript動畫實例之粒子文本的實現(xiàn)方法詳解,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2020-07-07JavaScript基于面向對象實現(xiàn)的無縫滾動輪播示例
這篇文章主要介紹了JavaScript基于面向對象實現(xiàn)的無縫滾動輪播,結合實例形式分析了JavaScript面向對象實現(xiàn)的無縫滾動輪播相關對象定義、初始化及功能實現(xiàn)技巧,需要的朋友可以參考下2020-01-01Javascript控制div屬性動態(tài)變化實例分析
這篇文章主要介紹了Javascript控制div屬性動態(tài)變化,以實例形式較為詳細的分析了JavaScript響應鼠標事件動態(tài)操作頁面元素屬性的技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-10-10