jquery中绑定mousewheel遇到的那些事
浏览数：36 /
时间：2015年06月09日
闲着的时候，突然想写个视觉落差的效果。遇到倒通了一些。
前期百度找到的都是原生实现素材
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!完成，以后牢记这件事儿。
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
