用javascript獲取當(dāng)頁(yè)面上鼠標(biāo)光標(biāo)位置和觸發(fā)事件的對(duì)象的代碼
更新時(shí)間：2009年12月09日 20:56:20 作者：
用 javascript 獲取當(dāng)頁(yè)面上鼠標(biāo)（光標(biāo)）位置 和 觸發(fā)事件的對(duì)象 的方法
用javascript獲取鼠標(biāo)位置：
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);
}
關(guān)于代碼的詳細(xì)說明，原文中已經(jīng)介紹，現(xiàn)轉(zhuǎn)到此處：
我們首先要聲明一個(gè) evnet 對(duì)象，無(wú)論移動(dòng)、點(diǎn)擊、按鍵等，都會(huì)激活一個(gè) evnet ，在 Internet Explorer 里， event 是全局變量，會(huì)被存儲(chǔ)在 window.event 里． 在 firefox 或者其他瀏覽器，event 會(huì)被相應(yīng)的函數(shù)獲?。?dāng)我們將mouseMove函數(shù)賦值于document.onmousemove，mouseMove 會(huì)獲取鼠標(biāo)移動(dòng)事件。
為了讓 ev 在所有瀏覽器下獲取了 event 事件，在Firefox下"||window.event"將不起作用，因?yàn)閑v已經(jīng)有了賦值。在 MSIE 中 ev 為空，所以得到 window.event 。
因?yàn)樵谶@篇文章中我們需要多次獲取鼠標(biāo)位置，所以我們?cè)O(shè)計(jì)了一個(gè) mousePosition 函數(shù)，它包含一個(gè)參數(shù) ： event 。
因?yàn)槲覀円?MSIE 和其他瀏覽器下運(yùn)行，F(xiàn)irefox 和其他瀏覽器用 event.pageX 和 event.pageY 來表示鼠標(biāo)相對(duì)于文檔的位置，如果你有一個(gè) 500*500 的窗口并且你的鼠標(biāo)在絕對(duì)中間，那么 pageX 和 pageY 的值都是 250，如果你向下滾動(dòng) 500， 那么 pageY 將變成 750。
MSIE 正好相反，它使用 event.clientX 和 event.clientY 表示鼠標(biāo)相當(dāng)于窗口的位置，而不是文檔。在同樣的例子中，如果你向下滾動(dòng)500，clientY 依然是 250，因此，我們需要添加 scrollLeft 和 scrollTop 這兩個(gè)相對(duì)于文檔的屬性。最后，MSIE 中文檔并不是從 0，0 開始，而是通常有一個(gè)小的邊框（通常是 2 象素），邊框的大小定義在 document.body.clientLeft 和 clientTop 中，我們也把這些加進(jìn)去。
很幸運(yùn)，我們現(xiàn)在已經(jīng)用 mousePosition 函數(shù)解決了坐標(biāo)問題，不需為此費(fèi)心了。
用javascript獲取觸發(fā)事件的對(duì)象
<script language = "javascript" >
document.onclick = onClick;
function onClick(ev)
{
ev = ev || window.event; // 事件
var target = ev.target || ev.srcElement; // 獲得事件源
/* target.getAttribute()是獲取該事件源對(duì)像里面的一些屬性。
比如對(duì)像中有（name，id，type等等）；*/
var dragObj = target.getAttribute('id');
alert(dragObj);
}
</ script >
關(guān)鍵還是event對(duì)象在多瀏覽器下的兼容性，和上面方式是一樣的，這里代碼就不做說明了
復(fù)制代碼 代碼如下:
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);
}
關(guān)于代碼的詳細(xì)說明，原文中已經(jīng)介紹，現(xiàn)轉(zhuǎn)到此處：
我們首先要聲明一個(gè) evnet 對(duì)象，無(wú)論移動(dòng)、點(diǎn)擊、按鍵等，都會(huì)激活一個(gè) evnet ，在 Internet Explorer 里， event 是全局變量，會(huì)被存儲(chǔ)在 window.event 里． 在 firefox 或者其他瀏覽器，event 會(huì)被相應(yīng)的函數(shù)獲?。?dāng)我們將mouseMove函數(shù)賦值于document.onmousemove，mouseMove 會(huì)獲取鼠標(biāo)移動(dòng)事件。
為了讓 ev 在所有瀏覽器下獲取了 event 事件，在Firefox下"||window.event"將不起作用，因?yàn)閑v已經(jīng)有了賦值。在 MSIE 中 ev 為空，所以得到 window.event 。
因?yàn)樵谶@篇文章中我們需要多次獲取鼠標(biāo)位置，所以我們?cè)O(shè)計(jì)了一個(gè) mousePosition 函數(shù)，它包含一個(gè)參數(shù) ： event 。
因?yàn)槲覀円?MSIE 和其他瀏覽器下運(yùn)行，F(xiàn)irefox 和其他瀏覽器用 event.pageX 和 event.pageY 來表示鼠標(biāo)相對(duì)于文檔的位置，如果你有一個(gè) 500*500 的窗口并且你的鼠標(biāo)在絕對(duì)中間，那么 pageX 和 pageY 的值都是 250，如果你向下滾動(dòng) 500， 那么 pageY 將變成 750。
MSIE 正好相反，它使用 event.clientX 和 event.clientY 表示鼠標(biāo)相當(dāng)于窗口的位置，而不是文檔。在同樣的例子中，如果你向下滾動(dòng)500，clientY 依然是 250，因此，我們需要添加 scrollLeft 和 scrollTop 這兩個(gè)相對(duì)于文檔的屬性。最后，MSIE 中文檔并不是從 0，0 開始，而是通常有一個(gè)小的邊框（通常是 2 象素），邊框的大小定義在 document.body.clientLeft 和 clientTop 中，我們也把這些加進(jìn)去。
很幸運(yùn)，我們現(xiàn)在已經(jīng)用 mousePosition 函數(shù)解決了坐標(biāo)問題，不需為此費(fèi)心了。
用javascript獲取觸發(fā)事件的對(duì)象
復(fù)制代碼 代碼如下:
<script language = "javascript" >
document.onclick = onClick;
function onClick(ev)
{
ev = ev || window.event; // 事件
var target = ev.target || ev.srcElement; // 獲得事件源
/* target.getAttribute()是獲取該事件源對(duì)像里面的一些屬性。
比如對(duì)像中有（name，id，type等等）；*/
var dragObj = target.getAttribute('id');
alert(dragObj);
}
</ script >
關(guān)鍵還是event對(duì)象在多瀏覽器下的兼容性，和上面方式是一樣的，這里代碼就不做說明了
您可能感興趣的文章:
- js 觸發(fā)select onchange事件代碼
- 代碼觸發(fā)js事件(click、change)示例應(yīng)用
- js獲取觸發(fā)事件元素在整個(gè)網(wǎng)頁(yè)中的絕對(duì)坐標(biāo)(示例代碼)
- javascript 動(dòng)態(tài)改變onclick事件觸發(fā)函數(shù)代碼
- JavaScript 動(dòng)態(tài)添加腳本，并觸發(fā)回調(diào)函數(shù)的實(shí)現(xiàn)代碼
- 文本框中,回車鍵觸發(fā)事件的js代碼[多瀏覽器兼容]
- 用按鈕觸發(fā)Javascript動(dòng)態(tài)生成一個(gè)表格的代碼
- FireFox與IE 下js兼容觸發(fā)click事件的代碼
- 鼠標(biāo)放上去觸發(fā)一個(gè)javascript提示框效果代碼
- UpdatePanel觸發(fā)javascript腳本的方法附代碼
- JS代碼觸發(fā)事件代碼實(shí)例
相關(guān)文章
js對(duì)象之JS入門之Array對(duì)象操作小結(jié)
每天一對(duì)象,今天我們也來new一個(gè)。沒有系統(tǒng)的學(xué)過JS，沒有特別的寫過一個(gè)比較出色的類庫(kù)，沒有運(yùn)用過一個(gè)很強(qiáng)的類庫(kù)，prototype.js在進(jìn)行著，慢慢的前進(jìn)相信不久的將來就可以應(yīng)用prototype.js來開發(fā)自己的應(yīng)用程序了。2011-01-01
bootstrap fileinput組件整合Springmvc上傳圖片到本地磁盤
這篇文章主要介紹了bootstrap fileinput組件整合Springmvc上傳圖片到本地磁盤的方法,需要的朋友可以參考下2017-05-05
JS 類型轉(zhuǎn)換常見方法小結(jié)，需要的朋友可以參考下。
2010-05-05 
bootstrap導(dǎo)航條實(shí)現(xiàn)代碼
這篇文章主要為大家詳細(xì)介紹了bootstrap導(dǎo)航條的實(shí)現(xiàn)代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-12-12 
js使用visibilitychange處理頁(yè)面關(guān)閉事件
本文主要介紹了js使用visibilitychange處理頁(yè)面關(guān)閉事件，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2022-06-06 
這篇文章主要介紹了JS訪問對(duì)象兩種方式區(qū)別解析,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2020-08-08 
JS實(shí)現(xiàn)六邊形3D拖拽翻轉(zhuǎn)效果的方法
這篇文章給大家分享一個(gè)利用javascript實(shí)現(xiàn)3D六邊形拖拽翻轉(zhuǎn)的效果實(shí)例，實(shí)現(xiàn)后的效果很贊，對(duì)大家的學(xué)習(xí)Javascript具有一定的參考借鑒價(jià)值，有需要的朋友們一起去來看看吧。
2016-09-09 
函數(shù)是由關(guān)鍵字function、函數(shù)名加一組參數(shù)及置于大括號(hào)中需要執(zhí)行的一段語(yǔ)義定義的。今天我們就來詳細(xì)講解一下JavaScript中的Function。
2015-02-02 
淺談Webpack4 Tree Shaking 終極優(yōu)化指南
這篇文章主要介紹了淺談Webpack4 Tree Shaking 終極優(yōu)化指南，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-11-11