鼠标滚轮事件问题

2019独角兽企业重金招聘Python工程师标准>>>

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

注意三个问题：

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.οnlοad=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 所触发的默认行为)
		
	}	
}

转载于:https://my.oschina.net/u/1791915/blog/804329