鼠標滾輪事件問題

首先咱們先看一張圖，看在各瀏覽器鼠標滾輪定義的事件和屬性有什麼不一樣。

注意三個問題：

1，ie/chrome鼠標滾輪的處理方法和firefox鼠標滾輪的處理方法

2，鼠標滾輪方向性 在ie/chrome 和firefox裏的不一樣及處理方法

3，阻止默認事件在ie/chrome和firefox的不一樣及處理方法

最後會貼出一個例子（用鼠標滾輪控制div高度的大小）

問題一：ie/chrome鼠標滾輪的處理方法和firefox鼠標滾輪的處理方法

首先ie/chrome 里加鼠標滾輪事件的方法是  obj.onmousewheel=fn

而後在火狐瀏覽器裏firefox:經過事件綁定DOMMouseScroll事件

obj.addEventListener('DOMMouseScroll',mousewheel,false);

解決辦法：加判斷

//ie chrome
    obj.onmousewheel=fn;
    if(obj.addEventListener){
        //火狐
        obj.addEventListener('DOMMouseScroll',fn,false);
    }

問題二：鼠標滾輪方向性 在ie/chrome 和firefox裏的不一樣及處理方法

ie/chrome鼠標滾動值 event.wheelDelta

//ie chrome
	obj.onmousewheel=fn;
	if(obj.addEventListener){
		//火狐
		obj.addEventListener('DOMMouseScroll',fn,false);
	}
function fn(ev){
		var oEvent=ev||event;
		console.log(oEvent.wheelDelta)
		//向上滾動爲120
		//向下滾動爲-120
		
	}

firefox鼠標滾動值event.detail

//ie chrome
	obj.onmousewheel=fn;
	if(obj.addEventListener){
		//火狐
		obj.addEventListener('DOMMouseScroll',fn,false);
	}
function fn(ev){
		var oEvent=ev||event;
		console.log(event.detail)
		//向上滾動爲-3
		//向下滾動爲3
		
	}

看到這裏咱們能夠看到ie/chrome和firefox裏鼠標滾動的值 的 寫法不同並且上下的值也是相反的 ， 如今咱們該像以前事件那樣用判斷來作兼容，代碼：

//ie chrome
	obj.onmousewheel=fn;
	if(obj.addEventListener){
		//火狐
		obj.addEventListener('DOMMouseScroll',fn,false);
	}
function fn(ev){
		//處理上下的兼容性問題
		var dir=true;//默認值
		if(oEvent.wheelDelta){
			//ie和chrome
			dir=oEvent.wheelDelta>0?true:false;	
		}else{
			//firefox
			dir=oEvent.detail<0?true:false;
		}
		//根據滾輪方向設定具體業務邏輯
		if(dir){
			//do something tyre爲滾輪向上
		}else{
			//do something  false爲滾輪向下
		}
		
}

問題三：如今咱們解決了前2個問題，那麼咱們來看看最後一個問題是什麼：

就是當頁面過長的時候，咱們操做div用滾輪滾動，咱們原本是想鼠標滾輪操做div的，但一樣也會觸發瀏覽器的默認滾動條，因此 咱們要阻止瀏覽器的默認行爲。

處理方法：

// addEventLisrener 綁定的時間須要經過event對象下面的的 preventDefaul
        if(oEvent.preventDefault){
            oEvent.preventDefault();
        }
        return false;//阻止默認行爲(阻止的是 obj.on時間名稱=fn 所觸發的默認行爲)

firefox用preventDefault(),ie/chrome用return false;

例子：用鼠標滾輪事件控制div的高度，上代碼。

window.onload=function(){
	var oBox=document.getElementById('box');
	//ie chrome
	document.onmousewheel=mousewheel;
	if(document.addEventListener){
		//火狐
		document.addEventListener('DOMMouseScroll',mousewheel,false);
	}
	
	function mousewheel(ev){
		var oEvent=ev||event;
		//alert(oEvent.detail)
		//alert(oEvent.detail)
		//處理上下的兼容性問題
		var dir=true;
		if(oEvent.wheelDelta){
			dir=oEvent.wheelDelta>0?true:false;	
		}else{
			dir=oEvent.detail<0?true:false;
		}
		//根據手錶方向設定具體業務邏輯
		if(dir){
			oBox.style.height=oBox.offsetHeight-10+'px';	
		}else{
			oBox.style.height=oBox.offsetHeight+10+'px';
		}
		// addEventLisrener 綁定的時間須要經過event對象下面的的 preventDefaul
		if(oEvent.preventDefault){
			oEvent.preventDefault();
		}
		return false;//阻止默認行爲(阻止的是 obj.on時間名稱=fn 所觸發的默認行爲)
		
	}	
}