淺談Javascript鼠標(biāo)和滾輪事件
更新時(shí)間:2012年06月27日 10:29:02 作者:
淺談Javascript鼠標(biāo)和滾輪事件,鼠標(biāo)事件也許是web頁面當(dāng)中最常用到的事件,因?yàn)槭髽?biāo)是最常用的導(dǎo)航設(shè)備
a)鼠標(biāo)事件
鼠標(biāo)事件也許是web頁面當(dāng)中最常用到的事件,因?yàn)槭髽?biāo)是最常用的導(dǎo)航設(shè)備,在DOM3級(jí)事件上定義了9個(gè)鼠標(biāo)事件,分別為:
click:當(dāng)用戶點(diǎn)擊鼠標(biāo)主鍵通常是指鼠標(biāo)左鍵或按回車鍵時(shí)觸發(fā)。
dbclick:當(dāng)用戶雙擊鼠標(biāo)主鍵時(shí)發(fā)生觸發(fā),這個(gè)事件并沒有在DOM2級(jí)事件中定義但是卻被普遍支持了,后來在DOM3級(jí)中得到了標(biāo)準(zhǔn)化。
mousedown:當(dāng)用戶按下鼠標(biāo)任意一個(gè)鍵都會(huì)觸發(fā),這個(gè)事件是不能夠通過鍵盤觸發(fā)的。
mouseenter:當(dāng)鼠標(biāo)圖標(biāo)從元素外移動(dòng)至元素邊界內(nèi)時(shí)觸發(fā)。該事件不支持冒泡,而且當(dāng)鼠標(biāo)在元素的上表面移動(dòng)時(shí)負(fù)觸發(fā)此事件。該事件不屬于DOM2級(jí)事件,屬于DOM3級(jí)后添加的事件,IE 、FF9+、以及opera支持此事件。
mouseleave:當(dāng)鼠標(biāo)處于元素上方,之后移出元素邊界是觸發(fā)該事件,與mouseenter事件相同,不支持冒泡,在元素上方是不觸發(fā),該事件不屬于DOM2級(jí)事件,屬于DOM3級(jí)后添加的事件,IE 、FF9+、以及opera支持此事件。
mousemove:當(dāng)鼠標(biāo)在某元素周圍移動(dòng)時(shí)重復(fù)觸發(fā),該事件不能通過鍵盤事件觸發(fā)。
mouseout:當(dāng)鼠標(biāo)處于某一元素上方,之后移動(dòng)到其他元素上方時(shí)觸發(fā)。元素移動(dòng)到原始元素的邊界外,或者原始元素的子元素上,這個(gè)事件不能通過鍵盤觸發(fā)。
mouseover:當(dāng)用戶將鼠標(biāo)第一次從某元素邊界外移動(dòng)到該元素邊界內(nèi)時(shí)觸發(fā),這個(gè)事件不能夠通過鍵盤觸發(fā)。
mouseup:當(dāng)用戶釋放鼠標(biāo)按鍵是觸發(fā),這個(gè)事件不能夠通過鍵盤觸發(fā)。
頁面上的所有元素都支持鼠標(biāo)事件,除了mouseenter和mouseleave外,所有的事件都冒泡,并且他們的默認(rèn)行為是可以被取消掉的。但取消鼠標(biāo)事件的默認(rèn)行為可能會(huì)影響到其他事件,因?yàn)橛行┦髽?biāo)事件是相互依賴的。
只有當(dāng)一個(gè)mousedown事件和一個(gè)mouseup事件在同一個(gè)元素上觸發(fā),才能觸發(fā)鼠標(biāo)的click事件;假設(shè)任何一個(gè)事件被取消,click事件將永遠(yuǎn)不會(huì)被觸發(fā)。相似的原理dbclick事件依賴于click事件,如果連續(xù)兩次click事件中任意一次被取消,dbclick都不會(huì)被觸發(fā)。常用的鼠標(biāo)事件如下:
1.mousedown、2.mouseup、3.click、4.mousedown、5.mouseup、6.click、7.dbclick。
無論是click 還是 dbclick事件,都依賴于其他事件的觸發(fā)。
你可以通過下面的代碼來確定瀏覽器是否在dom2事件上支持鼠標(biāo)事件,
var isSupport = document.implementation.hasFeature('MouseEvents','2.0');
然而值得注意的是在dom3級(jí)事件上檢測則有些不同:
var isSupport = document.implementation.hasFeature('MouseEvent','3.0');
在鼠標(biāo)事件上還包含一個(gè)子類事件,即wheel事件(滾輪事件)。在wheel事件中只包含一個(gè)事件,mousewheel事件,他反應(yīng)鼠標(biāo)滾輪或其他裝置,如mac的touchpad的交互情況。
b)關(guān)聯(lián)元素
對(duì)于mouseover和mouseout事件來說,還存在著與事件相關(guān)的元素,這連個(gè)事件所執(zhí)行的動(dòng)作包括,移動(dòng)鼠標(biāo)從一個(gè)元素邊界內(nèi)部到另一個(gè)元素邊界內(nèi)部。以mouseover事件為例,他的主要目標(biāo)元素是鼠標(biāo)將要移至的元素,而那個(gè)關(guān)聯(lián)元素就是失去鼠標(biāo)的那個(gè)元素。同樣對(duì)于mouseout事件,主要目標(biāo)是那個(gè)鼠標(biāo)移出的元素,而關(guān)聯(lián)元素則是獲得鼠標(biāo)的元素,DOM通過event對(duì)象上的relatedTarget屬性來提供關(guān)聯(lián)元素的信息,IE8或更早版本的IE不支持relatedTarge屬性,但卻提供了與其功能相類似的fromElement屬性和toElement屬性。在IE下,當(dāng)mousemove事件觸發(fā)時(shí),event對(duì)象的fromElement包含著關(guān)聯(lián)元素,當(dāng)mouseout事件觸發(fā)時(shí),event的toElement屬性包含著關(guān)聯(lián)元素。在IE9中支持所有的屬性,一個(gè)跨瀏覽器的getRelatedTarget方法可以這樣寫:
var eventUtil = {
getRelateTarget:function(event){
if (event.relatedTarget) {
return event.relatedTarget;
}else if(event.fromElement){
return event.fromElement;
}else if(event.toElement){
return event.toElement;
}else {
return null;
}
}
};
c)buttons
click事件只有當(dāng)鼠標(biāo)主鍵點(diǎn)擊了某一元素的時(shí)候才會(huì)觸發(fā)(或者當(dāng)某一元素獲得焦點(diǎn)時(shí)按下回車鍵),對(duì)于mousedown和mouseup來說,在事件對(duì)象event上存在一個(gè)屬性button,他可以確定是哪個(gè)鍵按下或者釋放。在DOM實(shí)現(xiàn)的button屬性值通常有三種可能:
0:代表主鍵,
1:代表滾輪,
2:代表副鍵。
在一般情況下主鍵指的是鼠標(biāo)的左鍵,副鍵代表鼠標(biāo)右鍵。
從IE8開始也提供了button屬性,但卻有著完全不同的取值范圍:
0 :沒有按鍵按下,
1 :主鍵已經(jīng)被按下,
2 :代表副鍵已經(jīng)被按下,
3 :主鍵副鍵都被按下,
4 :代表中間鍵被按下,
5 :代表主鍵和中間件被按下,
6 :代表副鍵和中間鍵被按下,
7 :代表三個(gè)鍵都被按下。
可見DOM 模型下的button屬性的取值范圍比IE模型下的取值范圍要簡單的多,而且個(gè)人覺得ie下的操作情況略顯變態(tài)。
d)其他事件信息
在DOM2級(jí)事件上,為事件對(duì)象event還提供了detail屬性來提供更多的事件信息,例如對(duì)于點(diǎn)擊事件來說,detail可以記錄同一像素位置的點(diǎn)擊次數(shù),detail的值是從1開始計(jì)數(shù)的,每次點(diǎn)擊后加一,如果在mousedown和mouseup之間,鼠標(biāo)發(fā)生移動(dòng),這個(gè)值將會(huì)被清零。
關(guān)于鼠標(biāo)事件就先寫這些,日后在慢慢補(bǔ)全。
鼠標(biāo)事件也許是web頁面當(dāng)中最常用到的事件,因?yàn)槭髽?biāo)是最常用的導(dǎo)航設(shè)備,在DOM3級(jí)事件上定義了9個(gè)鼠標(biāo)事件,分別為:
click:當(dāng)用戶點(diǎn)擊鼠標(biāo)主鍵通常是指鼠標(biāo)左鍵或按回車鍵時(shí)觸發(fā)。
dbclick:當(dāng)用戶雙擊鼠標(biāo)主鍵時(shí)發(fā)生觸發(fā),這個(gè)事件并沒有在DOM2級(jí)事件中定義但是卻被普遍支持了,后來在DOM3級(jí)中得到了標(biāo)準(zhǔn)化。
mousedown:當(dāng)用戶按下鼠標(biāo)任意一個(gè)鍵都會(huì)觸發(fā),這個(gè)事件是不能夠通過鍵盤觸發(fā)的。
mouseenter:當(dāng)鼠標(biāo)圖標(biāo)從元素外移動(dòng)至元素邊界內(nèi)時(shí)觸發(fā)。該事件不支持冒泡,而且當(dāng)鼠標(biāo)在元素的上表面移動(dòng)時(shí)負(fù)觸發(fā)此事件。該事件不屬于DOM2級(jí)事件,屬于DOM3級(jí)后添加的事件,IE 、FF9+、以及opera支持此事件。
mouseleave:當(dāng)鼠標(biāo)處于元素上方,之后移出元素邊界是觸發(fā)該事件,與mouseenter事件相同,不支持冒泡,在元素上方是不觸發(fā),該事件不屬于DOM2級(jí)事件,屬于DOM3級(jí)后添加的事件,IE 、FF9+、以及opera支持此事件。
mousemove:當(dāng)鼠標(biāo)在某元素周圍移動(dòng)時(shí)重復(fù)觸發(fā),該事件不能通過鍵盤事件觸發(fā)。
mouseout:當(dāng)鼠標(biāo)處于某一元素上方,之后移動(dòng)到其他元素上方時(shí)觸發(fā)。元素移動(dòng)到原始元素的邊界外,或者原始元素的子元素上,這個(gè)事件不能通過鍵盤觸發(fā)。
mouseover:當(dāng)用戶將鼠標(biāo)第一次從某元素邊界外移動(dòng)到該元素邊界內(nèi)時(shí)觸發(fā),這個(gè)事件不能夠通過鍵盤觸發(fā)。
mouseup:當(dāng)用戶釋放鼠標(biāo)按鍵是觸發(fā),這個(gè)事件不能夠通過鍵盤觸發(fā)。
頁面上的所有元素都支持鼠標(biāo)事件,除了mouseenter和mouseleave外,所有的事件都冒泡,并且他們的默認(rèn)行為是可以被取消掉的。但取消鼠標(biāo)事件的默認(rèn)行為可能會(huì)影響到其他事件,因?yàn)橛行┦髽?biāo)事件是相互依賴的。
只有當(dāng)一個(gè)mousedown事件和一個(gè)mouseup事件在同一個(gè)元素上觸發(fā),才能觸發(fā)鼠標(biāo)的click事件;假設(shè)任何一個(gè)事件被取消,click事件將永遠(yuǎn)不會(huì)被觸發(fā)。相似的原理dbclick事件依賴于click事件,如果連續(xù)兩次click事件中任意一次被取消,dbclick都不會(huì)被觸發(fā)。常用的鼠標(biāo)事件如下:
1.mousedown、2.mouseup、3.click、4.mousedown、5.mouseup、6.click、7.dbclick。
無論是click 還是 dbclick事件,都依賴于其他事件的觸發(fā)。
你可以通過下面的代碼來確定瀏覽器是否在dom2事件上支持鼠標(biāo)事件,
var isSupport = document.implementation.hasFeature('MouseEvents','2.0');
然而值得注意的是在dom3級(jí)事件上檢測則有些不同:
var isSupport = document.implementation.hasFeature('MouseEvent','3.0');
在鼠標(biāo)事件上還包含一個(gè)子類事件,即wheel事件(滾輪事件)。在wheel事件中只包含一個(gè)事件,mousewheel事件,他反應(yīng)鼠標(biāo)滾輪或其他裝置,如mac的touchpad的交互情況。
b)關(guān)聯(lián)元素
對(duì)于mouseover和mouseout事件來說,還存在著與事件相關(guān)的元素,這連個(gè)事件所執(zhí)行的動(dòng)作包括,移動(dòng)鼠標(biāo)從一個(gè)元素邊界內(nèi)部到另一個(gè)元素邊界內(nèi)部。以mouseover事件為例,他的主要目標(biāo)元素是鼠標(biāo)將要移至的元素,而那個(gè)關(guān)聯(lián)元素就是失去鼠標(biāo)的那個(gè)元素。同樣對(duì)于mouseout事件,主要目標(biāo)是那個(gè)鼠標(biāo)移出的元素,而關(guān)聯(lián)元素則是獲得鼠標(biāo)的元素,DOM通過event對(duì)象上的relatedTarget屬性來提供關(guān)聯(lián)元素的信息,IE8或更早版本的IE不支持relatedTarge屬性,但卻提供了與其功能相類似的fromElement屬性和toElement屬性。在IE下,當(dāng)mousemove事件觸發(fā)時(shí),event對(duì)象的fromElement包含著關(guān)聯(lián)元素,當(dāng)mouseout事件觸發(fā)時(shí),event的toElement屬性包含著關(guān)聯(lián)元素。在IE9中支持所有的屬性,一個(gè)跨瀏覽器的getRelatedTarget方法可以這樣寫:
復(fù)制代碼 代碼如下:
var eventUtil = {
getRelateTarget:function(event){
if (event.relatedTarget) {
return event.relatedTarget;
}else if(event.fromElement){
return event.fromElement;
}else if(event.toElement){
return event.toElement;
}else {
return null;
}
}
};
c)buttons
click事件只有當(dāng)鼠標(biāo)主鍵點(diǎn)擊了某一元素的時(shí)候才會(huì)觸發(fā)(或者當(dāng)某一元素獲得焦點(diǎn)時(shí)按下回車鍵),對(duì)于mousedown和mouseup來說,在事件對(duì)象event上存在一個(gè)屬性button,他可以確定是哪個(gè)鍵按下或者釋放。在DOM實(shí)現(xiàn)的button屬性值通常有三種可能:
0:代表主鍵,
1:代表滾輪,
2:代表副鍵。
在一般情況下主鍵指的是鼠標(biāo)的左鍵,副鍵代表鼠標(biāo)右鍵。
從IE8開始也提供了button屬性,但卻有著完全不同的取值范圍:
0 :沒有按鍵按下,
1 :主鍵已經(jīng)被按下,
2 :代表副鍵已經(jīng)被按下,
3 :主鍵副鍵都被按下,
4 :代表中間鍵被按下,
5 :代表主鍵和中間件被按下,
6 :代表副鍵和中間鍵被按下,
7 :代表三個(gè)鍵都被按下。
可見DOM 模型下的button屬性的取值范圍比IE模型下的取值范圍要簡單的多,而且個(gè)人覺得ie下的操作情況略顯變態(tài)。
d)其他事件信息
在DOM2級(jí)事件上,為事件對(duì)象event還提供了detail屬性來提供更多的事件信息,例如對(duì)于點(diǎn)擊事件來說,detail可以記錄同一像素位置的點(diǎn)擊次數(shù),detail的值是從1開始計(jì)數(shù)的,每次點(diǎn)擊后加一,如果在mousedown和mouseup之間,鼠標(biāo)發(fā)生移動(dòng),這個(gè)值將會(huì)被清零。
關(guān)于鼠標(biāo)事件就先寫這些,日后在慢慢補(bǔ)全。
您可能感興趣的文章:
- js實(shí)現(xiàn)的鼠標(biāo)滾輪滾動(dòng)切換頁面效果(類似360默認(rèn)頁面滾動(dòng)切換效果)
- JavaScript事件類型中焦點(diǎn)、鼠標(biāo)和滾輪事件詳解
- JavaScript焦點(diǎn)事件、鼠標(biāo)事件和滾輪事件使用詳解
- javascript實(shí)現(xiàn)禁止鼠標(biāo)滾輪事件
- 解析javascript中鼠標(biāo)滾輪事件
- js實(shí)現(xiàn)鼠標(biāo)滾輪控制圖片縮放效果的方法
- javascript監(jiān)聽鼠標(biāo)滾輪事件淺析
- js捕獲鼠標(biāo)滾輪事件代碼
- JS滾輪事件onmousewheel使用介紹
- js 事件對(duì)象 鼠標(biāo)滾輪效果演示說明
- JavaScript 滾輪事件使用說明
- js中鼠標(biāo)滾輪事件詳解(firefox多瀏覽器)
- javascript 鼠標(biāo)滾輪事件
- javascript 兼容鼠標(biāo)滾輪事件
- 兩種js監(jiān)聽滾輪事件的實(shí)現(xiàn)方法
相關(guān)文章
淺析創(chuàng)建javascript對(duì)象的方法
下面小編就為大家?guī)硪黄獪\析創(chuàng)建javascript對(duì)象的方法。小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-05-05JS實(shí)現(xiàn)數(shù)組扁平化的方法總結(jié)
數(shù)組扁平化相信不少朋友在一些面試中被問到過,這在我們?nèi)粘>幊讨幸彩且粋€(gè)常規(guī)操作,它需要我們將一個(gè)多維數(shù)組轉(zhuǎn)化成一個(gè)一維數(shù)組,所以,借著這篇文章,我們今天就一起來匯總一下幾種數(shù)組扁平化的方式,需要的朋友可以參考下2024-02-02微信小程序仿知乎實(shí)現(xiàn)評(píng)論留言功能
這篇文章主要為大家詳細(xì)介紹了微信小程序仿知乎實(shí)現(xiàn)評(píng)論留言功能,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-11-11JavaScript前端實(shí)現(xiàn)快照的示例代碼
snapshot 翻譯為快照,用于直觀獲取頁面在某個(gè)運(yùn)行時(shí)的狀態(tài),本文主要為大家詳細(xì)介紹 snapshot 工具實(shí)現(xiàn)的原理,以及其在項(xiàng)目中的使用,需要的可以參考下2023-11-11用Golang運(yùn)行JavaScript的實(shí)現(xiàn)示例
這篇文章主要介紹了用Golang運(yùn)行JavaScript的實(shí)現(xiàn)示例,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11js實(shí)現(xiàn)文本框支持加減運(yùn)算的方法
這篇文章主要介紹了js實(shí)現(xiàn)文本框支持加減運(yùn)算的方法,可實(shí)現(xiàn)文本框輸入加減運(yùn)算式同時(shí)右側(cè)實(shí)時(shí)顯示對(duì)應(yīng)計(jì)算結(jié)果的功能,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-08-08原生 JS Ajax,GET和POST 請(qǐng)求實(shí)例代碼
這篇文章主要介紹了原生 JS Ajax,GET和POST 請(qǐng)求實(shí)例代碼的相關(guān)資料,非常不錯(cuò)具有參考借鑒價(jià)值,需要的朋友可以參考下2016-06-06