jquery中绑定mousewheel遇到的那些事

闲着的时候，突然想写个视觉落差的效果。遇到倒通了一些。

前期百度找到的都是原生实现素材

1.event.type(mousewheel//ie chrome opera,DOMMouseScroll//firefox);

2.事件绑定(原生)【我是基于jquery写的直接用on代替】

3.event.wheelDelta//ie chrome opera,event.Detail//firefox

素材已经找到开始写代码,初始代码

(function(){
	 $.fn.extend({
	 	getmouseEventType:function(){
	 		var type=‘‘;
	 		if(document.mozHidden!==undefined){
	 			type="DOMMouseScroll";
	 		}else{
	 			type="mousewheel"
	 		}
	 		return type;
	 	},
    	mousewheelEvent:function(event){
    		var type = event.type;
			if (type == ‘DOMMouseScroll‘ || type == ‘mousewheel‘) {
				event.delta = (event.wheelDelta) ? event.wheelDelta / 120 : -(event.detail || 0) / 3;
			}
    		return event;
    	}
	});
})(jQuery)
$(window).on($.fn.getmouseEventType(),function(event){
	var event=event||window.event;
	var oEvent=$.fn.mousewheelEvent(event);
	console.log(oEvent.delta)
	//var event=$.fn.mousewheelEvent(event);

})

遇到问题，event事件触发一直有问题，于是console.log（event）的时候问题出来了。看到jquery重构了event事件，在originalEvent上保留了原生的方法。之前一直没有接触这块，所以比较迷茫。

可以清楚看到被jquery.event封装了一层皮，一般还真难发现。

修改后代码

(function(){
	 $.extend({
	 	getmouseEventType:function(){
	 		var type=‘‘;
	 		if(document.mozHidden!==undefined){
	 			type="DOMMouseScroll";
	 		}else{
	 			type="mousewheel"
	 		}
	 		return type;
	 	},
    	mousewheelEvent:function(event){
    		var event=event||window.event,
                type = event.type;
            //jquery重写了event方法 找到原生方法
            //event.originalEvent.wheelDelta--ie,chrome,opera
            //event.originalEvent.detail--firefox
            console.log(event)
			if (type == ‘DOMMouseScroll‘) {
                event.delta=-(event.originalEvent.detail || 0) / 3;
			}else if(type == ‘mousewheel‘){
                event.delta=event.originalEvent.wheelDelta / 120;

            }
    		return event;
    	}
	});
})(jQuery)
$(window).on($.getmouseEventType(),function(event){
	var oEvent=$.mousewheelEvent(event);
	console.log(oEvent.delta)

})

Good!完成，以后牢记这件事儿。

jquery中绑定mousewheel遇到的那些事