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

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

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

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

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

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

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

mousemove：當鼠標指針在元素內部移動時重復地觸發。不能通過鍵盤觸發這個事件。

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

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

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

頁面上的所有元素都支持鼠標事件。除了 mouseenter 和 mouseleave，所有鼠標事件都會冒泡， 也可以被取消，而取消鼠標事件將會影響瀏覽器的默認行為。取消鼠標事件的默認行為還會影響其他事 件，因為鼠標事件與其他事件是密不可分的關系。

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

(1) mousedown

(2) mouseup

(3) click

(4) mousedown

(5) mouseup

(6) click

(7) dblclick

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

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

(1) mousedown

(2) mouseup

(3) click

(4) mouseup

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

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

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

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

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

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

本文僅限內部技術人員學習交流,不得作于其他商業用途.希望此文對廣技人員有所幫助。原創文章出自:南昌網站建設公司-百恒網絡http://m.51yjwy.com/如轉載請注明出處!