鼠標(biāo)事件也是開(kāi)發(fā)過(guò)程中經(jīng)常遇到需要判斷的事件，例如，單擊click，雙擊dblclick等常用操作。接下來(lái)由南昌網(wǎng)站建設(shè)公司百恒網(wǎng)絡(luò)開(kāi)發(fā)人員向大家初步介紹鼠標(biāo)與滾輪事件。

鼠標(biāo)事件是 Web 開(kāi)發(fā)中常用的一類(lèi)事件，畢竟鼠標(biāo)還是主要的定位設(shè)備。DOM3 級(jí)事件中定 義了 9個(gè)鼠標(biāo)事件，簡(jiǎn)介如下。

click：在用戶(hù)單擊主鼠標(biāo)按鈕(一般是左邊的按鈕)或者按下回車(chē)鍵時(shí)觸發(fā)。這一點(diǎn)對(duì)確保 易訪(fǎng)問(wèn)性很重要，意味著 onclick 事件處理程序既可以通過(guò)鍵盤(pán)也可以通過(guò)鼠標(biāo)執(zhí)行。

dblclick：在用戶(hù)雙擊主鼠標(biāo)按鈕(一般是左邊的按鈕)時(shí)觸發(fā)。從技術(shù)上說(shuō)，這個(gè)事件并不 是 DOM2級(jí)事件規(guī)范中規(guī)定的，但鑒于它得到了廣泛支持，所以 DOM3級(jí)事件將其納入了標(biāo)準(zhǔn)。

mousedown：在用戶(hù)按下了任意鼠標(biāo)按鈕時(shí)觸發(fā)。不能通過(guò)鍵盤(pán)觸發(fā)這個(gè)事件。

mouseenter：在鼠標(biāo)光標(biāo)從元素外部首次移動(dòng)到元素范圍之內(nèi)時(shí)觸發(fā)。這個(gè)事件不冒泡，而且 在光標(biāo)移動(dòng)到后代元素上不會(huì)觸發(fā)。DOM2級(jí)事件并沒(méi)有定義這個(gè)事件，但 DOM3級(jí)事件將它 納入了規(guī)范。IE、Firefox 9+和 Opera支持這個(gè)事件。

mouseleave：在位于元素上方的鼠標(biāo)光標(biāo)移動(dòng)到元素范圍之外時(shí)觸發(fā)。這個(gè)事件不冒泡，而且 在光標(biāo)移動(dòng)到后代元素上不會(huì)觸發(fā)。DOM2級(jí)事件并沒(méi)有定義這個(gè)事件，但 DOM3級(jí)事件將它 納入了規(guī)范。IE、Firefox 9+和 Opera支持這個(gè)事件。

mousemove：當(dāng)鼠標(biāo)指針在元素內(nèi)部移動(dòng)時(shí)重復(fù)地觸發(fā)。不能通過(guò)鍵盤(pán)觸發(fā)這個(gè)事件。

mouseout：在鼠標(biāo)指針位于一個(gè)元素上方，然后用戶(hù)將其移入另一個(gè)元素時(shí)觸發(fā)。又移入的另 一個(gè)元素可能位于前一個(gè)元素的外部，也可能是這個(gè)元素的子元素。不能通過(guò)鍵盤(pán)觸發(fā)這個(gè)事件。

mouseover：在鼠標(biāo)指針位于一個(gè)元素外部，然后用戶(hù)將其首次移入另一個(gè)元素邊界之內(nèi)時(shí)觸 發(fā)。不能通過(guò)鍵盤(pán)觸發(fā)這個(gè)事件。

mouseup：在用戶(hù)釋放鼠標(biāo)按鈕時(shí)觸發(fā)。不能通過(guò)鍵盤(pán)觸發(fā)這個(gè)事件。

頁(yè)面上的所有元素都支持鼠標(biāo)事件。除了 mouseenter 和 mouseleave，所有鼠標(biāo)事件都會(huì)冒泡， 也可以被取消，而取消鼠標(biāo)事件將會(huì)影響瀏覽器的默認(rèn)行為。取消鼠標(biāo)事件的默認(rèn)行為還會(huì)影響其他事 件，因?yàn)槭髽?biāo)事件與其他事件是密不可分的關(guān)系。

只有在同一個(gè)元素上相繼觸發(fā) mousedown 和 mouseup 事件，才會(huì)觸發(fā) click 事件;如果 mousedown 或 mouseup 中的一個(gè)被取消，就不會(huì)觸發(fā) click 事件。類(lèi)似地，只有觸發(fā)兩次 click 事 件，才會(huì)觸發(fā)一次dblclick事件。如果有代碼阻止了連續(xù)兩次觸發(fā)click事件(可能是直接取消click 事件，也可能通過(guò)取消 mousedown 或 mouseup 間接實(shí)現(xiàn))，那么就不會(huì)觸發(fā) dblclick 事件了。這 4 個(gè)事件觸發(fā)的順序始終如下：

(1) mousedown

(2) mouseup

(3) click

(4) mousedown

(5) mouseup

(6) click

(7) dblclick

顯然，click 和 dblclick 事件都會(huì)依賴(lài)于其他先行事件的觸發(fā);而 mousedown 和 mouseup 則 不受其他事件的影響。

IE8 及之前版本中的實(shí)現(xiàn)有一個(gè)小 bug，因此在雙擊事件中，會(huì)跳過(guò)第二個(gè) mousedown 和 click 事件，其順序如下：

(1) mousedown

(2) mouseup

(3) click

(4) mouseup

(5) dblclick IE9修復(fù)了這個(gè) bug，之后順序就正確了。

使用以下代碼可以檢測(cè)瀏覽器是否支持以上 DOM2 級(jí)事件(除 dbclick、mouseenter 和 mouseleave 之外)：

var isSupported = document.implementation.hasFeature("MouseEvents", "2.0");

要檢測(cè)瀏覽器是否支持上面的所有事件，可以使用以下代碼：

var isSupported = document.implementation.hasFeature("MouseEvent", "3.0")

南昌網(wǎng)站制作公司百恒網(wǎng)絡(luò)前端開(kāi)發(fā)工程師提醒大家注意，DOM3級(jí)事件的 feature 名是"MouseEvent"，而非"MouseEvents"。 鼠標(biāo)事件中還有一類(lèi)滾輪事件。而說(shuō)是一類(lèi)事件，其實(shí)就是一個(gè) mousewheel 事件。這個(gè)事件跟蹤 鼠標(biāo)滾輪，類(lèi)似于 Mac的觸控板。

本文僅限內(nèi)部技術(shù)人員學(xué)習(xí)交流,不得作于其他商業(yè)用途.希望此文對(duì)廣技人員有所幫助。原創(chuàng)文章出自:南昌網(wǎng)站建設(shè)公司-百恒網(wǎng)絡(luò)http://www.51yjwy.com/如轉(zhuǎn)載請(qǐng)注明出處!