滚轮事件的整理

 

    滚轮属性的不同：

   1 IE等往上滚一圈为120，往下滚一圈为-120。w3c那边往上滚一圈为-3，往下滚一圈为3，但opera9x系列却实现错误，与IE滚动方向一致，不过10后又修复。

   2 safari早期版本，wheelDelta会出现浮点数的情况，我们需要自行取整。

 

Event property	Applies to event:	Up 1 click	Up 2 clicks	Down 1 click	Down 2 clicks
e.wheelDelta Supported in Non FF browsers	onmousewheel and in non FF browsers	120	240	-120	-240
e.detail Supported in FF and Opera	DOMMouseScroll and in FF (as of FF3.x)	-1	-2	1	2

 

 

1  火狐事件

 

	//FF 中滚轮事件为DOMMouseScroll（我测试谷歌浏览器也支持），
	window.addEventListener("DOMMouseScroll",function(event){
	  alert(event.type)
	  alert(event.clientY)
	},false);
	
	//创建一个事件类型，如果浏览器已经有这个事件类型则会有异常出现
	var event = document.createEvent("MouseEvent");
	//为了证明分派成功，特意将其clientY设为90
	event.initMouseEvent("DOMMouseScroll",true, null, window,0,0,0,0,90,false,false,false,false,0,null);
	//对象关联事件，并且  事件的触发
	window.dispatchEvent(event)

2  其他浏览器  mousewheel

 

   非IE和火狐

	//mousewheel 基本浏览器都 支持 
	window.addEventListener("mousewheel",function(event){
	  alert(event.type)
	  alert(event.clientX)
	},false);
	var event = document.createEvent("MouseEvent");
	//为了证明分派成功，特意将其clientX设为120
	event.initMouseEvent("mousewheel",true, null, window,0,0,0,120,0,false,false,false,false,0,null);
	window.dispatchEvent(event)	

  IE

  

	  //IE 事件的添加
	  window.onload = function(){
	    document.attachEvent("onmousewheel",function(){
	      var e = window.event;
	      alert(e)
	      alert(e.type)
	      alert(e.aa)
	    });
	  var event = document.createEventObject();
	  event.aa = "自定义属性"
	  document.fireEvent("onmousewheel",event)
	}

 

 

 3 滚轮事件的统一处理

	
	//添加事件处理 
	function addEvent(el, type, callback, useCapture  ){
	      if(el.dispatchEvent){//w3c方式优先
	          el.addEventListener( type, callback, !!useCapture  );
	      }else {
	          el.attachEvent( "on"+type, callback );
	      }
	      return callback;//返回callback方便卸载时用
	  }
	
	  var wheel = function(obj,callback){
	      var wheelType = "mousewheel"
	      try{
	    	 
	         //火狐没有这个事件不会有异常，wheelType 会重新赋值 ，其他浏览器有这个事件出现异常wheelType不会赋值
	          document.createEvent("MouseScrollEvents"); 
	          wheelType = "DOMMouseScroll";//只有火狐会执行到这个位置 
	      }catch(e){}
	      addEvent(obj, wheelType,function(event){
	          if ("wheelDelta" in event){//统一为±120，其中正数表示为向上滚动，负数表示向下滚动
	              var delta = event.wheelDelta
	              //opera 9x系列的滚动方向与IE保持一致，10后修正
	              if( window.opera && opera.version() < 10 )
	                  delta = -delta;
	              //由于事件对象的原有属性是只读，我们只能通过添加一个私有属性delta来解决兼容问题
	              event.delta = Math.round(delta) /120; //修正safari的浮点 bug
	          }else if( "detail" in event ){
	              event.wheelDelta = -event.detail * 40//为FF添加更大众化的wheelDelta
	              event.delta = event.wheelDelta /120  //添加私有的delta
	          }
	          callback.call(obj,event);//修正IE的this指向
	      });
	  }
	
  wheel(document,function(e){
		 alert(e.delta);
 });
	

  

  4 实例 

  

<h4>javascript 滚轮事件   </h4>

<input type="text" value="0" id="txt"/>

<hr></hr>
 <div style="position:absolute;background-color:#EEEEEE;height: 240px;width: 80px;left: 50px;top: 100px; ">
 		<div  id="solid"  style="cursor: n-resize;position: absolute;left:24px;top:20px;border:1px solid;border-color:#999999 white white #999999;width: 30px;height: 200px;  ">
 			<div id="solidBlock" style="position:absolute; top:0px;width:28px;height:20px;background-color:#CCCCCC;border: 1px solid;border-color: white #999999   #999999 white ;"></div>
 		</div>
 </div>
 
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>ee
<script type="text/javascript">

var  stopEvent = function(e){  
    e = e || window.event;  
    if(e.preventDefault) {  
      e.preventDefault(); //FF  
      e.stopPropagation();  
    }else{  
      e.returnValue = false; //IE  
      e.cancelBubble = true;  
    }  
}

//添加事件处理   
	function addEvent(el, type, callback, useCapture  ){  
      if(el.dispatchEvent){//w3c方式优先  
          el.addEventListener( type, callback, !!useCapture  );  
      }else {  
          el.attachEvent( "on"+type, callback );  
      }  
      return callback;//返回callback方便卸载时用  
    }  

	 //根据id查找对象
	 function _get(id){
		return document.getElementById(id);
	 }

	 
  var wheel = function(obj,callback){  
      var wheelType = "mousewheel"  
      try{  
           
         //火狐没有这个事件不会有异常，wheelType 会重新赋值 ，其他浏览器有这个事件出现异常wheelType不会赋值  
          document.createEvent("MouseScrollEvents");   
          wheelType = "DOMMouseScroll";//只有火狐会执行到这个位置   
      }catch(e){}  
      addEvent(obj, wheelType,function(event){  
          if ("wheelDelta" in event){//统一为±120，其中正数表示为向上滚动，负数表示向下滚动  
              var delta = event.wheelDelta  
              //opera 9x系列的滚动方向与IE保持一致，10后修正  
              if( window.opera && opera.version() < 10 )  
                  delta = -delta;  
              //由于事件对象的原有属性是只读，我们只能通过添加一个私有属性delta来解决兼容问题  
              event.delta = Math.round(delta) /120; //修正safari的浮点 bug  
          }else if( "detail" in event ){
              event.wheelDelta = -event.detail * 40//为FF添加更大众化的wheelDelta  
              event.delta = event.wheelDelta /120  //添加私有的delta  
          }  
          callback.call(obj,event);//修正IE的this指向  
      });  
  }

  //鼠标滚动的箭头 
   //得到滚动对象
  var block = _get('solidBlock');
  wheel(_get('solid'),function(e){ 
	 
	 var currentTop = parseFloat(block.style.top) - e.delta*10 ;
	 //alert(this.style.top+"   "+currentTop);
	 //每次滚动改变 top值 
     block.style.top  = Math.max(0, Math.min(200-20-1,currentTop ) )+'px';
 	 stopEvent(e);
  });  


	  
   wheel(_get('txt'),function(e){ 
		this.value = this.value - e.delta;
		stopEvent(e);
  }); 
    
</script>