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

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

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

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

mousedown：在用戶按下了任意鼠標(biāo)按鈕時觸發(fā)。不能通過鍵盤觸發(fā)這個事件。

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

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

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

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

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

mouseup：在用戶釋放鼠標(biāo)按鈕時觸發(fā)。不能通過鍵盤觸發(fā)這個事件。

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

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

(1) mousedown

(2) mouseup

(3) click

(4) mousedown

(5) mouseup

(6) click

(7) dblclick

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

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

(1) mousedown

(2) mouseup

(3) click

(4) mouseup

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

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

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

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

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

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

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