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

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

EventUtil.addHandler(document, "mousewheel", function(event){?
? ? ? ?event = EventUtil.getEvent(event);
? ? ? ? alert(event.wheelDelta);?
? ? ? ?});?
? ? ? ?這個(gè)例子會(huì)在發(fā)生 mousewheel 事件時(shí)顯示 wheelDelta 的值。多數(shù)情況下，只要知道鼠標(biāo)滾輪 滾動(dòng)的方向就夠了，而這通過檢測(cè) wheelDelta 的正負(fù)號(hào)就可以確定。 有一點(diǎn)要注意：在 Opera 9.5之前的版本中，wheelDelta 值的正負(fù)號(hào)是顛倒的。如果你打算支持 早期的 Opera版本，就需要使用瀏覽器檢測(cè)技術(shù)來確定實(shí)際的值，如下面的例子所示。?
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 對(duì)象檢測(cè)了瀏覽器是不是早期版本的 Opera。?
由于 mousewheel 事件非常流行，而且所有瀏覽器都支持它，所以 HTML 5也加 入了該事件。
? ? ? ?Firefox支持一個(gè)名為 DOMMouseScroll 的類似事件，也是在鼠標(biāo)滾輪滾動(dòng)時(shí)觸發(fā)。與 mousewheel 事件一樣，DOMMouseScroll 也被視為鼠標(biāo)事件，因而包含與鼠標(biāo)事件有關(guān)的所有屬性。而有關(guān)鼠標(biāo)滾 輪的信息則保存在 detail 屬性中，當(dāng)向前滾動(dòng)鼠標(biāo)滾輪時(shí)，這個(gè)屬性的值是-3 的倍數(shù)，當(dāng)向后滾動(dòng) 鼠標(biāo)滾輪時(shí)，這個(gè)屬性的值是 3 的倍數(shù)。如圖展示了這個(gè)屬性。
? ? ? ?可以將 DOMMouseScroll 事件添加到頁面中的任何元素，而且該事件會(huì)冒泡到 window 對(duì)象。因此，可以像下面這樣針對(duì)這個(gè)事件來添加事件處理程序。 ? ? ? ?
EventUtil.addHandler(window, "DOMMouseScroll", function(event){
? ? ? ? event = EventUtil.getEvent(event);
? ? ? ? alert(event.detail);
});
? ? ? ?這個(gè)簡(jiǎn)單的事件處理程序會(huì)在鼠標(biāo)滾輪滾動(dòng)時(shí)顯示 detail 屬性的值。 若要給出跨瀏覽器環(huán)境下的解決方案，第一步就是創(chuàng)建一個(gè)能夠取得鼠標(biāo)滾輪增量值（delta）的方 法。下面是我們添加到 EventUtil 對(duì)象中的這個(gè)方法。?

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 點(diǎn)擊下載
或復(fù)制地址：http://www.dgscpc.com/uploads/images/20161221/EventUtil.js
client.js 點(diǎn)擊下載
或復(fù)制地址：http://www.dgscpc.com/uploads/images/20161221/client.js

? ? ? ?這里，getWheelDelta()方法首先檢測(cè)了事件對(duì)象是否包含 wheelDelta 屬性，如果是則通過瀏 覽器檢測(cè)代碼確定正確的值。如果 wheelDelta 不存在，則假設(shè)相應(yīng)的值保存在 detail 屬性中。由于 Firefox 的值有所不同，因此首先要將這個(gè)值的符號(hào)反向，然后再乘以 40，就可以保證與其他瀏覽器的 值相同了。有了這個(gè)方法之后，就可以將相同的事件處理程序指定給 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);
? ? ? ? })();

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