首页 > 代码库 > jquery中绑定mousewheel遇到的那些事
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!完成，以后牢记这件事儿。
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。