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

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

EventUtil.addHandler(document, "mousewheel", function(event){?
? ? ? ?event = EventUtil.getEvent(event);
? ? ? ? alert(event.wheelDelta);?
? ? ? ?});?
? ? ? ?這個例子會在發(fā)生 mousewheel 事件時顯示 wheelDelta 的值。多數(shù)情況下，只要知道鼠標滾輪 滾動的方向就夠了，而這通過檢測 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見頁面下載地址：




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


? ? ? ?
? ? ? ?





以上代碼使用前面創(chuàng)建的 client 對象檢測了瀏覽器是不是早期版本的 Opera。?
由于 mousewheel 事件非常流行，而且所有瀏覽器都支持它，所以 HTML 5也加 入了該事件。
? ? ? ?Firefox支持一個名為 DOMMouseScroll 的類似事件，也是在鼠標滾輪滾動時觸發(fā)。與 mousewheel 事件一樣，DOMMouseScroll 也被視為鼠標事件，因而包含與鼠標事件有關的所有屬性。而有關鼠標滾 輪的信息則保存在 detail 屬性中，當向前滾動鼠標滾輪時，這個屬性的值是-3 的倍數(shù)，當向后滾動 鼠標滾輪時，這個屬性的值是 3 的倍數(shù)。如圖展示了這個屬性。
? ? ? ?可以將 DOMMouseScroll 事件添加到頁面中的任何元素，而且該事件會冒泡到 window 對象。因此，可以像下面這樣針對這個事件來添加事件處理程序。 ? ? ? ?
EventUtil.addHandler(window, "DOMMouseScroll", function(event){
? ? ? ? event = EventUtil.getEvent(event);
? ? ? ? alert(event.detail);
});
? ? ? ?這個簡單的事件處理程序會在鼠標滾輪滾動時顯示 detail 屬性的值。 若要給出跨瀏覽器環(huán)境下的解決方案，第一步就是創(chuàng)建一個能夠取得鼠標滾輪增量值（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.gimmickmag.com/uploads/images/20161221/EventUtil.js
client.js 點擊下載
或復制地址：http://www.gimmickmag.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);
? ? ? ? })();

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