js 事件對象鼠標滾輪效果演示說明

2019-11-21 00:27:37

字體：大中小

來源：轉載

供稿：網友

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Mouse Wheel Data</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <style> .slider { width:50px; height:180px; background:#eee; padding:10px 0; cursor:n-resize; } .slider-slot { width:16px; margin:0 auto; height:180px; background:#eee; border:1px solid gray; border-color:#999 white white #999; position:relative; } .slider-trigger { width:14px; height:18px; font:1px/0 arial; border:1px solid gray; border-color:white #999 #999 white; background:#ccc; position:absolute; } .slider-trigger b { display:block; margin:1px 3px; border-top:1px solid #999; border-bottom:1px solid white; } </style> </head> <body> <h2>文本框增加/減少值</h2> <div><input type="text" id="txt" value="1440" /><span id="warn">文本框獲得焦點后滾動鼠標滾輪</span></div> <h2>鼠標滾動縮放圖片</h2> <div><img src="http://files.VeVB.COm/upload/201005/20100531231516458.jpg" id="img" width="300" style="cursor:-moz-zoom-in" title="鼠標滾動 縮放大小" / alt="" /></div> <h2>鼠標滾動控制滑塊移動</h2> <div   id="iwvjtn8m0"   class="slider" id="slider"> <div   id="iwvjtn8m0"   class="slider-slot"> <div   id="iwvjtn8m0"   class="slider-trigger" id="sliderTrigger"> <strong></strong> <strong></strong> <strong></strong> <strong></strong> <strong></strong> </div> </div> </div> </body> <script> var $ = function(i) { return document.getElementById( i ); } //取得滾動值 function getWheelValue( e ) { e = e||event; return ( e.wheelDelta ? e.wheelDelta/120 : -( e.detail%3 == 0 ? e.detail/3 : e.detail ) ) ; } function stopEvent(e) { e = e||event; if( e.preventDefault )e.preventDefault(); e.returnValue = false; } //綁定事件,這里對mousewheel做了判斷,注冊時統一使用mousewheel function addEvent( obj,type,fn ) { var isFirefox = typeof document.body.style.MozUserSelect != 'undefined'; if( obj.addEventListener ) obj.addEventListener( isFirefox ? 'DOMMouseScroll' : type,fn,false ); else obj.attachEvent( 'on'+type,fn ); return fn; } //移除事件,這里對mousewheel做了兼容,移除時統一使用mousewheel function delEvent( obj,type,fn ) { var isFirefox = typeof document.body.style.MozUserSelect != 'undefined'; if( obj.removeEventListener ) obj.removeEventListener( isFirefox ? 'DOMMouseScroll' : type,fn,false ); else obj.detachEvent( 'on'+type,fn ); } /*限制范圍函數, 參數是三個數字,如果num 大于 max, 則返回max， 如果小于min，則返回min,如果在max和min之間，則返回num */ function range( num, max,min ) { return Math.min( max, Math.max( num,min ) ); } /* ------------ */ /* <h2>文本框增加/減少值</h2> */ $( 'txt' ).onfocus = function() { //保存txt自己的引用 var me = this, //onfocus之后注冊滾輪事件 handler = addEvent( me,'mousewheel',function(e) { stopEvent( e ); var delta = getWheelValue(e); /* +me.value 將me.value轉換成數字， 然后使用isNaN檢查轉換后的數字是否為NaN 如果是，重新賦值me.value=0; */ if( isNaN( +me.value ) ) me.value = 0; //遞增（或遞減） me.value = +me.value + delta; //選中me里的文字 me.select(); }); //失去焦點時，把mousewheel事件移除，重置window.onblur和handler引用為null this.onblur = function() { //移除掉mousewheel事件 delEvent( me,'mousewheel',handler ); window.onblur = handler = null; } //為了防止瀏覽器失焦后，文本框重復觸發focus，在onblur時，讓文本框同時失焦 window.onblur = function() { me.blur(); //把自己清理掉 this.onblur = null; } } /* <h2>鼠標滾動縮放圖片</h2> */ addEvent( $('img'),'mousewheel',function(e) { stopEvent( e ); var delta = getWheelValue(e); //每次遞增（或遞減）10px，使用了范圍限制，保證圖片不會過大過小 var img = $('img'); //沒有修復ie的this指向，所以這里只好重新獲取img img.style.width = range( img.offsetWidth + ( delta * 10 ),550,100) + 'px'; return false; }); /* <h2>鼠標滾動控制滑塊移動</h2> */ addEvent( $('slider'), 'mousewheel',function(e) { stopEvent( e ); var delta = getWheelValue(e), tar = $('sliderTrigger'); //杯具的反轉，因為tar.offsetTop 越大，滑塊就越往下，所以delta又需要反轉回來，向上是負的，向下是正的，所以乘以-1 tar.style.top = range( tar.offsetTop + ( -1 * delta * 10 ),160,0 ) + 'px'; }); </script></html>

[Ctrl+A 全選注:如需引入外部Js需刷新才能執行]

先來看看各個瀏覽器的兼容情況

IE 6,7,8
注冊事件使用 onmousewheel
取得滾動的值使用 event.wheelDelta
滾動步長 120
向下是負值，向上是正值
當鼠標在一個同一個坐標，并且滾輪不間斷滾動時，wheelDelta會按步長遞增
（比如 -240 -360 ）

Firefox 3.5
注冊事件有兩個MozMousePixelScroll,DOMMouseScroll,但是它們不能使用element.onDOMMouseScroll方式注冊，必須使用addEventLinstener來監聽事件
Firefox沒有event.wheelDelta,它使用event.detail 來獲取滾動的信息(Firefox這點做的很奇怪)
event.detail 本身是用來記錄一個事件在原地(鼠標坐標不發生變化的情況下)執行了多少次的信息
而在DOMMouseScroll事件發生的時候，它的值通常是 3 和 -3
但是它的取值和IE正好相反, 向上是負,向下是正( 這個問題在代碼中需要做統一 )
為什么說它的值通常是 3和-3呢，因為當你按住ctrl ,alt, shift 之后，再滑動鼠標滾輪，detail 的值就會成為 1和-1
而按住別的鍵，則正值有時還會變成6
總之在我看來是有點亂糟糟，

MozMousePixelScroll 據Mozilla說，是幾乎跟DOMMouseScroll一樣的事件，只不過更精確（到像素）
但是這個事件的detail值返回的非常奇怪，默認是51和-51,按住ctrl ,alt, shift 變成了 +- 17. @_@，所以它被華麗的無視了，我們不打算使用它

Chrome 和IE保持一致，但是它考慮到了橫向鼠標滾輪設備的情況，所以增加了兩個鼠標來分別獲取值

事件 onmousewheel
wheelDelta {number}
wheelDeltaX {number}
wheelDeltaY {number}

這次 Opera 又是集大成者，既有detail 取值也一樣是3,-3,又有wheelDelta,不過表現上倒是很一致
事件 onmousewheel
detail = {number}
wheelDelta = {number}

本來我們應該從Firefox支持的event.detail或者IE等支持的event.wheelDelta的取值中，選擇一個，然后把另一個通過計算做成統一的，
但是實際上我們只能通過這些值知道是向上滾還是向下滾，
所以為了方便，我們兩個都不取，通過計算把他們統一成 +1 和 -1.(這樣做也是為了實際應用中的運算方便);

對于IE,Chrome來說，直接除以120就可以搞定

Opera 同時支持wheelDelta和detail ,但是detail沒有wheelDelta同一位置遞增的能力，所以
我們首先優先判斷wheelDelta是否存在，如果存在，就使用wheelDelta,如果不存在再使用detail

由于firefox的鍵盤干擾，我們還需要對detail做一些過濾
首先用這個值跟3做取模運算 value % 3
說它是3的倍數，那么返回值是0，我們就用value除以3后返回( 保證返回的值是+1 -1 )
如果返回值不是0，那說明這個值不是1就是-1，那就直接返回這個值

最后，由于Firefox返回值的規則是向上是負向下是正，與平時的習慣不同，我們要將正負反轉過來，方法也很簡單，計算結果前面加一個負號就可以搞定
話說回來，對滾輪事件的支持情況firefox真是有點悶.

好了，分析了一大堆，其實代碼就幾句:

復制代碼代碼如下:

 
function getWheelValue( e ) 
{ 
e = e||event; 
return ( e.wheelDelta ? e.wheelDelta/120 : -( e.detail%3 == 0 ? e.detail : e.detail/3 ) ); 
} 

最后說說未來的滾輪事件和API
在DOM3 Event 中
滾輪事件變得更為復雜（也支持更多的東西）
注冊的事件并沒有變，依然叫mousewheel
專門增加了兩枚滾輪事件對象
MouseWheelEvent
WheelEvents
而且支持了x,y,z三個軸向的滾輪值( 真復雜>_< )
感興趣可以瞧瞧這里
http://www.w3.org/TR/DOM-Level-3-Events/#events-mousewheelevents

上一篇：javascript 事件對象坐標事件說明

下一篇：javascript 四則運算精度修正函數代碼