鼠标滚轮事件问题

首先咱们先看一张图，看在各浏览器鼠标滚轮定义的事件和属性有什么不一样。

注意三个问题：

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 所触发的默认行为)
		
	}	
}