js 事件對(duì)象 鼠標(biāo)滾輪效果演示說(shuō)明
更新時(shí)間：2010年05月31日 23:15:17 作者：
第三篇，繼續(xù)總結(jié)事件對(duì)象 先看看監(jiān)聽鼠標(biāo)滾輪事件能幫我們做什么
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]
先來(lái)看看各個(gè)瀏覽器的兼容情況
IE 6,7,8
注冊(cè)事件使用 onmousewheel
取得滾動(dòng)的值使用 event.wheelDelta
滾動(dòng)步長(zhǎng) 120
向下是負(fù)值，向上是正值
當(dāng)鼠標(biāo)在一個(gè)同一個(gè)坐標(biāo)，并且滾輪不間斷滾動(dòng)時(shí)，wheelDelta會(huì)按步長(zhǎng)遞增
（比如 -240 -360 ）
Firefox 3.5
注冊(cè)事件有兩個(gè)MozMousePixelScroll,DOMMouseScroll,但是它們不能使用element.onDOMMouseScroll方式注冊(cè)，必須使用addEventLinstener來(lái)監(jiān)聽事件
Firefox沒有event.wheelDelta,它使用event.detail 來(lái)獲取滾動(dòng)的信息(Firefox這點(diǎn)做的很奇怪)
event.detail 本身是用來(lái)記錄一個(gè)事件在原地(鼠標(biāo)坐標(biāo)不發(fā)生變化的情況下)執(zhí)行了多少次的信息
而在DOMMouseScroll事件發(fā)生的時(shí)候，它的值通常是 3 和 -3
但是它的取值和IE正好相反, 向上是負(fù),向下是正( 這個(gè)問(wèn)題在代碼中需要做統(tǒng)一 )
為什么說(shuō)它的值通常是 3和-3呢，因?yàn)楫?dāng)你按住ctrl ,alt, shift 之后，再滑動(dòng)鼠標(biāo)滾輪，detail 的值就會(huì)成為 1和-1
而按住別的鍵，則正值有時(shí)還會(huì)變成6
總之在我看來(lái)是有點(diǎn)亂糟糟，
MozMousePixelScroll 據(jù)Mozilla說(shuō)，是幾乎跟DOMMouseScroll一樣的事件，只不過(guò)更精確（到像素）
但是這個(gè)事件的detail值返回的非常奇怪，默認(rèn)是51和-51,按住ctrl ,alt, shift 變成了 +- 17. @_@，所以它被華麗的無(wú)視了，我們不打算使用它
Chrome 和IE保持一致，但是它考慮到了橫向鼠標(biāo)滾輪設(shè)備的情況，所以增加了兩個(gè)鼠標(biāo)來(lái)分別獲取值
事件 onmousewheel
wheelDelta {number}
wheelDeltaX {number}
wheelDeltaY {number}
這次 Opera 又是集大成者，既有detail 取值也一樣是3,-3,又有wheelDelta,不過(guò)表現(xiàn)上倒是很一致
事件 onmousewheel
detail = {number}
wheelDelta = {number}
本來(lái)我們應(yīng)該從Firefox支持的event.detail或者IE等支持的event.wheelDelta的取值中，選擇一個(gè)，然后把另一個(gè)通過(guò)計(jì)算做成統(tǒng)一的，
但是實(shí)際上我們只能通過(guò)這些值知道 是向上滾 還是向下滾，
所以為了方便，我們兩個(gè)都不取，通過(guò)計(jì)算把他們統(tǒng)一成 +1 和 -1.(這樣做也是為了實(shí)際應(yīng)用中的運(yùn)算方便);
對(duì)于IE,Chrome來(lái)說(shuō)，直接除以120就可以搞定
Opera 同時(shí)支持wheelDelta和detail ,但是detail沒有wheelDelta同一位置遞增的能力，所以
我們首先優(yōu)先判斷wheelDelta是否存在，如果存在，就使用wheelDelta,如果不存在再使用detail
由于firefox的鍵盤干擾，我們還需要對(duì)detail做一些過(guò)濾
首先用這個(gè)值跟3做取模運(yùn)算 value % 3
說(shuō)它是3的倍數(shù)，那么返回值是0，我們就用value除以3后返回( 保證返回的值是+1 -1 )
如果返回值不是0，那說(shuō)明這個(gè)值不是1就是-1，那就直接返回這個(gè)值
最后，由于Firefox返回值的規(guī)則是向上是負(fù) 向下是正，與平時(shí)的習(xí)慣不同，我們要將正負(fù)反轉(zhuǎn)過(guò)來(lái)，方法也很簡(jiǎn)單，計(jì)算結(jié)果前面加一個(gè)負(fù)號(hào)就可以搞定
話說(shuō)回來(lái)，對(duì)滾輪事件的支持情況firefox真是有點(diǎn)悶.
好了，分析了一大堆，其實(shí)代碼就幾句:
復(fù)制代碼 代碼如下:
function getWheelValue( e )
{
e = e||event;
return ( e.wheelDelta ? e.wheelDelta/120 : -( e.detail%3 == 0 ? e.detail : e.detail/3 ) );
}
最后說(shuō)說(shuō)未來(lái)的滾輪事件和API
在DOM3 Event 中
滾輪事件變得更為復(fù)雜（也支持更多的東西）
注冊(cè)的事件并沒有變，依然叫mousewheel
專門增加了兩枚滾輪事件對(duì)象
MouseWheelEvent
WheelEvents
而且支持了x,y,z三個(gè)軸向的滾輪值( 真復(fù)雜>_< )
感興趣可以瞧瞧這里
http://www.w3.org/TR/DOM-Level-3-Events/#events-mousewheelevents
您可能感興趣的文章:
相關(guān)文章
如何使用ES6的class類繼承來(lái)實(shí)現(xiàn)絢麗小球效果
JS是由ES(ECMAScript)、DOM(瀏覽器文檔對(duì)象)、BOM(瀏覽器對(duì)象模型)組成,這篇文章主要給大家介紹了關(guān)于如何使用ES6的class類繼承來(lái)實(shí)現(xiàn)絢麗小球效果的相關(guān)資料,需要的朋友可以參考下2021-06-06
非常不錯(cuò)的一個(gè)JS分頁(yè)效果代碼，值得研究
非常不錯(cuò)的一個(gè)JS分頁(yè)效果代碼，值得研究...2007-06-06
JS實(shí)現(xiàn)控制圖片顯示大小的方法【圖片等比例縮放功能】
這篇文章主要介紹了JS實(shí)現(xiàn)控制圖片顯示大小的方法,即實(shí)現(xiàn)圖片等比例縮放功能,涉及JS動(dòng)態(tài)操作頁(yè)面元素屬性相關(guān)技巧,需要的朋友可以參考下2017-02-02
微信瀏覽器左上角返回按鈕監(jiān)聽的實(shí)現(xiàn)
這篇文章主要介紹了微信瀏覽器左上角返回按鈕監(jiān)聽的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03
這篇文章主要為大家詳細(xì)介紹了JS上傳組件FileUpload自定義模板的使用方法，感興趣的小伙伴們可以參考一下2016-05-05
在 javascript 中，可以使用 == 來(lái)比較兩個(gè)數(shù)據(jù)是否相等，如果兩個(gè)數(shù)據(jù)的類型不同，那么，將在進(jìn)行轉(zhuǎn)換后進(jìn)行比較2010-04-04
JS添加或修改控件的樣式(Class)實(shí)現(xiàn)方法
下面小編就為大家?guī)?lái)一篇JS添加或修改控件的樣式(Class)實(shí)現(xiàn)方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-10-10
原生JS實(shí)現(xiàn)的放大鏡特效示例【測(cè)試可用】
這篇文章主要介紹了原生JS實(shí)現(xiàn)的放大鏡特效,涉及javascript事件響應(yīng)及頁(yè)面元素動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2018-12-12
JavaScript 中的 new、bind、call、apply 實(shí)際這些都離不開 this，因此本文將著重討論 this，在此過(guò)程中分別講解其他相關(guān)知識(shí)點(diǎn)。2020-09-09
這篇文章主要介紹了JavaScript中使用Callback控制流程介紹,本文講解了callback的一些問(wèn)題和優(yōu)化后的寫法并給出代碼實(shí)例,需要的朋友可以參考下2015-03-03