前面介紹了鼠標的點擊事件，點擊次數不同所對的值不同，具體判斷方法，如何獲取相關的值，若大家還有什么不清楚的可以點擊《javascript中鼠標按鈕事件判斷方法》再次瀏覽，鼠標滾輪也是常見事件之一，由南昌網站制作公司百恒網絡前端開發工程師結合實全接著介紹其判斷方法及應用。
? ? ? ?IE 6.0首先實現了 mousewheel 事件。此后，Opera、Chrome和 Safari也都實現了這個事件。當用 戶通過鼠標滾輪與頁面交互、在垂直方向上滾動頁面時（無論向上還是向下），就會觸發 mousewheel 事件。這個事件可以在任何元素上面觸發，終會冒泡到 document（IE8）或 window（IE9、Opera、 Chrome及 Safari）對象。與 mousewheel 事件對應的 event 對象除包含鼠標事件的所有標準信息外， 還包含一個特殊的 wheelDelta 屬性。當用戶向前滾動鼠標滾輪時，wheelDelta 是 120的倍數；當用 戶向后滾動鼠標滾輪時，wheelDelta 是120的倍數。如圖展示了這個屬性。?

? ? ? ?將 mousewheel 事件處理程序指定給頁面中的任何元素或 document 對象，即可處理鼠標滾輪的 交互操作。來看下面的例子。?

EventUtil.addHandler(document, "mousewheel", function(event){?
? ? ? ?event = EventUtil.getEvent(event);
? ? ? ? alert(event.wheelDelta);?
? ? ? ?});?
? ? ? ?這個例子會在發生 mousewheel 事件時顯示 wheelDelta 的值。多數情況下，只要知道鼠標滾輪 滾動的方向就夠了，而這通過檢測 wheelDelta 的正負號就可以確定。 有一點要注意：在 Opera 9.5之前的版本中，wheelDelta 值的正負號是顛倒的。如果你打算支持 早期的 Opera版本，就需要使用瀏覽器檢測技術來確定實際的值，如下面的例子所示。?
EventUtil.addHandler(document, "mousewheel", function(event){
? ? ? ? event = EventUtil.getEvent(event);
? ? ? ? var delta = (client.engine.opera && client.engine.opera < 9.5 ? -event.wheelDelta : event.wheelDelta);
? ? ? ? alert(delta);
? ? ? ? });?
完整代碼如下,其中涉及到的client.js和EventUtil.js見頁面下載地址：




? ? ? ?
? ? ? ?
? ? ? ?


? ? ? ?
? ? ? ?





以上代碼使用前面創建的 client 對象檢測了瀏覽器是不是早期版本的 Opera。?
由于 mousewheel 事件非常流行，而且所有瀏覽器都支持它，所以 HTML 5也加 入了該事件。
? ? ? ?Firefox支持一個名為 DOMMouseScroll 的類似事件，也是在鼠標滾輪滾動時觸發。與 mousewheel 事件一樣，DOMMouseScroll 也被視為鼠標事件，因而包含與鼠標事件有關的所有屬性。而有關鼠標滾 輪的信息則保存在 detail 屬性中，當向前滾動鼠標滾輪時，這個屬性的值是-3 的倍數，當向后滾動 鼠標滾輪時，這個屬性的值是 3 的倍數。如圖展示了這個屬性。
? ? ? ?可以將 DOMMouseScroll 事件添加到頁面中的任何元素，而且該事件會冒泡到 window 對象。因此，可以像下面這樣針對這個事件來添加事件處理程序。 ? ? ? ?
EventUtil.addHandler(window, "DOMMouseScroll", function(event){
? ? ? ? event = EventUtil.getEvent(event);
? ? ? ? alert(event.detail);
});
? ? ? ?這個簡單的事件處理程序會在鼠標滾輪滾動時顯示 detail 屬性的值。 若要給出跨瀏覽器環境下的解決方案，第一步就是創建一個能夠取得鼠標滾輪增量值（delta）的方 法。下面是我們添加到 EventUtil 對象中的這個方法。?

var EventUtil = {
? ? ? ? //省略了其他代碼?
getWheelDelta: function(event){
if (event.wheelDelta){
return (client.engine.opera && client.engine.opera < 9.5 ? -event.wheelDelta : event.wheelDelta);
} else {
return -event.detail * 40;
}
},

//省略了其他代碼 };?

EventUtil.js 點擊下載
或復制地址：http://www.51yjwy.com/uploads/images/20161221/EventUtil.js
client.js 點擊下載
或復制地址：http://www.51yjwy.com/uploads/images/20161221/client.js

? ? ? ?這里，getWheelDelta()方法首先檢測了事件對象是否包含 wheelDelta 屬性，如果是則通過瀏 覽器檢測代碼確定正確的值。如果 wheelDelta 不存在，則假設相應的值保存在 detail 屬性中。由于 Firefox 的值有所不同，因此首先要將這個值的符號反向，然后再乘以 40，就可以保證與其他瀏覽器的 值相同了。有了這個方法之后，就可以將相同的事件處理程序指定給 mousewheel 和 DOMMouse- Scroll 事件了，例如：
? ? ? ? (function(){

function handleMouseWheel(event){
event = EventUtil.getEvent(event);
var delta = EventUtil.getWheelDelta(event);
alert(delta);
}

EventUtil.addHandler(document, "mousewheel", handleMouseWheel);
EventUtil.addHandler(document, "DOMMouseScroll", handleMouseWheel);
? ? ? ? })();

? ? ? ?我們將相關代碼放在了一個私有作用域中，從而不會讓新定義的函數干擾全局作用域。這里定義的 handleMouseWheel()函數可以用作兩個事件的處理程序（如果指定的事件不存在，則為該事件指定處 理程序的代碼就會靜默地失敗）。由于使用了 EventUtil.getWheelDelta()方法，我們定義的這個事 件處理程序函數可以適用于任何一種情況。
? 本文僅限內部技術人員學習交流,不得作于其他商業用途.希望此文對廣大技人員有所幫助。原創文章出自:南昌網站建設公司-百恒網絡http://www.51yjwy.com/如轉載請注明出處!