js 事件對(duì)象 鼠標(biāo)滾輪效果演示說明
更新時(shí)間：2010年05月31日 23:15:17 作者：
第三篇，繼續(xù)總結(jié)事件對(duì)象 先看看監(jiān)聽鼠標(biāo)滾輪事件能幫我們做什么
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]
先來看看各個(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來監(jiān)聽事件
Firefox沒有event.wheelDelta,它使用event.detail 來獲取滾動(dòng)的信息(Firefox這點(diǎn)做的很奇怪)
event.detail 本身是用來記錄一個(gè)事件在原地(鼠標(biāo)坐標(biāo)不發(fā)生變化的情況下)執(zhí)行了多少次的信息
而在DOMMouseScroll事件發(fā)生的時(shí)候，它的值通常是 3 和 -3
但是它的取值和IE正好相反, 向上是負(fù),向下是正( 這個(gè)問題在代碼中需要做統(tǒng)一 )
為什么說它的值通常是 3和-3呢，因?yàn)楫?dāng)你按住ctrl ,alt, shift 之后，再滑動(dòng)鼠標(biāo)滾輪，detail 的值就會(huì)成為 1和-1
而按住別的鍵，則正值有時(shí)還會(huì)變成6
總之在我看來是有點(diǎn)亂糟糟，
MozMousePixelScroll 據(jù)Mozilla說，是幾乎跟DOMMouseScroll一樣的事件，只不過更精確（到像素）
但是這個(gè)事件的detail值返回的非常奇怪，默認(rèn)是51和-51,按住ctrl ,alt, shift 變成了 +- 17. @_@，所以它被華麗的無視了，我們不打算使用它
Chrome 和IE保持一致，但是它考慮到了橫向鼠標(biāo)滾輪設(shè)備的情況，所以增加了兩個(gè)鼠標(biāo)來分別獲取值
事件 onmousewheel
wheelDelta {number}
wheelDeltaX {number}
wheelDeltaY {number}
這次 Opera 又是集大成者，既有detail 取值也一樣是3,-3,又有wheelDelta,不過表現(xiàn)上倒是很一致
事件 onmousewheel
detail = {number}
wheelDelta = {number}
本來我們應(yīng)該從Firefox支持的event.detail或者IE等支持的event.wheelDelta的取值中，選擇一個(gè)，然后把另一個(gè)通過計(jì)算做成統(tǒng)一的，
但是實(shí)際上我們只能通過這些值知道 是向上滾 還是向下滾，
所以為了方便，我們兩個(gè)都不取，通過計(jì)算把他們統(tǒng)一成 +1 和 -1.(這樣做也是為了實(shí)際應(yīng)用中的運(yùn)算方便);
對(duì)于IE,Chrome來說，直接除以120就可以搞定
Opera 同時(shí)支持wheelDelta和detail ,但是detail沒有wheelDelta同一位置遞增的能力，所以
我們首先優(yōu)先判斷wheelDelta是否存在，如果存在，就使用wheelDelta,如果不存在再使用detail
由于firefox的鍵盤干擾，我們還需要對(duì)detail做一些過濾
首先用這個(gè)值跟3做取模運(yùn)算 value % 3
說它是3的倍數(shù)，那么返回值是0，我們就用value除以3后返回( 保證返回的值是+1 -1 )
如果返回值不是0，那說明這個(gè)值不是1就是-1，那就直接返回這個(gè)值
最后，由于Firefox返回值的規(guī)則是向上是負(fù) 向下是正，與平時(shí)的習(xí)慣不同，我們要將正負(fù)反轉(zhuǎn)過來，方法也很簡(jiǎn)單，計(jì)算結(jié)果前面加一個(gè)負(fù)號(hào)就可以搞定
話說回來，對(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 ) );
}
最后說說未來的滾輪事件和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)文章
這篇文章主要介紹了javascript原型鏈繼承用法,實(shí)例分析了javascript原型鏈繼承中的技巧與相關(guān)注意事項(xiàng),非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-01-01
這篇文章主要介紹了JS顯示日歷和天氣的方法,涉及JavaScript日期與時(shí)間的操作技巧,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下2016-03-03
在《理解Javascript_12_執(zhí)行模型淺析》一文中,我們初步的了解了執(zhí)行上下文與作用域的概念，那么這一篇將深入分析執(zhí)行上下文的構(gòu)建過程，了解執(zhí)行上下文、函數(shù)對(duì)象、作用域三者之間的關(guān)系。2010-10-10
這篇文章主要介紹了javascript解析json的方法,以實(shí)例形式詳細(xì)講述了javascript的json庫(kù)用法,需要的朋友可以參考下2014-11-11
DLL+ ActiveX控件+WEB頁(yè)面調(diào)用例子
因項(xiàng)目需要，開始學(xué)習(xí)并研究VC、DLL及ActiveX控件，網(wǎng)上資料找了很多，但沒一個(gè)可用的或者說沒一個(gè)例子可理解并運(yùn)行的。沒辦法，自己研究吧。功夫不負(fù)有心人，終有小成了，呵呵，現(xiàn)在把自己學(xué)習(xí)總結(jié)了一下，獻(xiàn)給需要的人。2010-08-08
小程序如何獲取多個(gè)formId實(shí)現(xiàn)詳解
這篇文章主要介紹了小程序如何獲取多個(gè)formId實(shí)現(xiàn)詳解,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-09-09
微信小程序云開發(fā)實(shí)現(xiàn)云數(shù)據(jù)庫(kù)讀寫權(quán)限
這篇文章主要為大家詳細(xì)介紹了微信小程序云開發(fā)實(shí)現(xiàn)云數(shù)據(jù)庫(kù)讀寫權(quán)限，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-05-05
這篇文章主要針對(duì)一道JS前端閉包面試題進(jìn)行解析，從例題出發(fā)詳細(xì)介紹JS前端閉包相關(guān)知識(shí)，感興趣的小伙伴們可以參考一下2015-12-12
這篇文章主要介紹了Java File類的常用方法總結(jié),本文講解了File類的常用方法,并對(duì)一些方法給出了代碼示例,需要的朋友可以參考下2015-03-03
JavaScript動(dòng)態(tài)操作表格實(shí)例(添加,刪除行,列及單元格)
這篇文章主要是對(duì)JavaScript動(dòng)態(tài)操作表格實(shí)例(添加,刪除行,列及單元格)進(jìn)行了詳細(xì)的分析介紹，需要的朋友可以過來參考下，希望對(duì)大家有所幫助2013-11-11