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

來源：懂視網責編：小采時間：2020-11-27 20:49:43

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

js事件對象鼠標滾輪效果演示說明_javascript技巧: Mouse Wheel Data .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 #99

推薦度：

點擊下載本文 文檔為doc格式

導讀js事件對象鼠標滾輪效果演示說明_javascript技巧: Mouse Wheel Data .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 #99

<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> 
<input type="text" id="txt" value="1440" />文本框獲得焦點后滾動鼠標滾輪 
<h2>鼠標滾動縮放圖片</h2> 
<img src="https://www.gxlcms.com/Uploads-s/new/2019-09-25-201925/201005312315158.jpg" id="img" width="300" style="cursor:-moz-zoom-in" title="鼠標滾動 縮放大小" / alt="" /> 
<h2>鼠標滾動控制滑塊移動</h2> 
 
 
 
 
 
 
 
 
 
 
 
</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

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

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

推薦度：

點擊下載本文 文檔為doc格式

標簽：鼠標 js event

熱門焦點

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

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

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

最新推薦

猜你喜歡

熱門推薦