jquery扩展鼠标mousewheel事件

 　　最近项目中要有个鼠标在图片上滚动实现图片放大和缩小的得到功能，隐约的记得好像记得有个 mousewheel 事件，可以实现需求，于是乎，开始在网上查找这一方法，但是，出乎意料的结果，各浏览器对此方法有着不同的实现方式，当时我就呵呵啦...
这下麻烦啦，于是又在网上查了些许资料，基本上都是大同小异，大概的思路都是根据firefox的DOMMouseScroll事件 和 其它浏览器的onmousewheel事件来实现 自定义mousewheel事件，其实前辈们留下来的 基本上也可以拿来用啦，可是鬼使神差的不知怎么的这次就非要叫个针，非要自己实现一下试试，而且本人比较擅长 jquery, 所以有了想用 $.fn.extend 扩展一个 mousewheel事件的想法，所以就开启了下边的自定义 jquery 扩展 mousewheel事件之旅。

　　其实呢，现在有个比较成熟的 jquery.mousewheel.js 插件，发现好多用到鼠标滚轮轮动效果的网站都用了这个插件，兼容性也挺高的，所以如果网站建设对加载文件数量不在意的话完全可以使用此插件：

　　下载地址：

　　　　https://github.com/jquery/jquery-mousewheel
　　　　http://plugins.jquery.com/mousewheel/
　　　　原谅我网速不好 以上两个地址 我都没访问到， 吼吼....

　　　　http://www.jq22.com/jquery-info805（最后再此站点 下载了个应用 jquery.mousewheel.js 的 Demo，其中有 我们需要的插件哦：））

　　细读了两边jquery.mousewheel.js源码，了解到，它是用 $.event.special 从 HTMLElement层级 进行的添加，可是这并不是我想要的，不能忘了自己最初的目的（我只是想要一个枣尝尝，并没有想要一颗枣树...）

　　

好了不说了,开始正题,原谅我一说就容易刹不住车....

　　首先，计划个思路，分个 1，2, 3,4..... 步..

　　step1: 遍读网络博客了解各浏览器所支持的 鼠标滚动 事件，以便了解兼容性的不同

　　涨姿势：

　　　　　　主要区别在于 firefox 和 其它浏览器的区别：firefox支持DOMMouseScroll, 而 其它浏览器支持mousewheel。

　　　　　　可是看了 jquery.mousewheel.js源码后，发现 貌似还有Browser 或是 同种Browser不同版本号, 支持的方式也是不一样，所以有又有了 wheel 和 MozMousePixelScroll（这个一看就是firefox支持的） 这两个事件，具体没有研究，如果对这方面有造诣的同仁们，欢迎留言，讨论交流。

　　思路：

　　　　　　1.把各浏览器对mousewheel支持的事件,组成数组，以便之后的事件监听

　　　　　　2.将不同的mousewheel事件，进行事件监听（根据涨姿势 阶段了解到，主要是要处理firefox下的事件监听)

　　所以有了下边的这段，参考 jquery.mousewheel.js 插件，并有些小改动的代码，如下：　　

 

    $.fn.extend({  
        mousewheel: function(){
                var toBind = ( 'onwheel' in document || document.documentMode >= 9 ) ?        //documentMode属性返回浏览器渲染当前文档所用的模式
                        ['wheel'] : ['mousewheel', 'DomMouseScroll', 'MozMousePixelScroll'];
                   var el = this[0];                                                            //this[0];  jquery对象 转 JS对象(因addEventListener是JS对象的监听事件)
                if( el.addEventListener ){    
                   for( var i = toBind.length; i; ){
                       el.addEventListener(toBind[--i],handleFun,false);
                   }
                }
                else {
                    el.onmousewheel = handleFun;
                }
    });

 

 

　　

　　step2: 对监听事件 中的事件处理函数进行设计，目的：得到 滚轮 的滑动方向（这点很重要哦，每一步都要明确知道我们要干什么）

　　涨姿势：

　　　　　　经过对defferent browers 测试，得到可以用来判断 滚轮滚动方向的属性，经测试 主要在 wheelDelta、wheelDeltaY 和 deltaY 三个属性上面有些文章（在step1阶段了解到还和detail属性有关，然而在自测阶段，发现 然并卵... detail=0 没有变过，可能是我用测浏览器版本问题，如果对这方面有造诣的同仁们，欢迎留言，讨论交流）。

　　　　　　测试结果：

　　　　　　

　　思路： 

　　　　　　1.根据测试得到的结果，用滑动鼠标的滚轮以上各个属性的值的符号来确定 滚轮的滑动方向

　　　　　2.确定目标：向上滚动--> 1, 向下滚动--> -1

　　思路已有，start coding.....

 

                //deal with the mousewheel
                function handleFun(e){
                   var driect = 0, delta=0;    //driect:滚动方向  delta:各浏览器监听滚动事件的属性值
                   var e = e || window.event;
                   if ( e.wheelDelta ){ delta = e.wheelDelta }
                   else if ( e.deltaY     ){ delta = e.deltaY * -1 }
                   else if( e.wheelDeltaY ) { delta = e.wheelDeltaY }
                   else { 
                           console.log('get delta,have somethings wrong...');
                   }
                   delta==0 ? console.log('get delta,have somethings wrong...') :
                   delta>0     ? driect=1 : driect=-1;    

                   typeof fn==='function' ? fn( $(el) ,driect ) : '';
                }

 

综合step1 和 step2, 完整写法：

        $.fn.extend({
            mousewheel: function( fn ){
                //judge the brower's mousewheel event, bind the event to element 
                var toBind = ( 'onwheel' in document || document.documentMode >= 9 ) ?
                        ['wheel'] : ['mousewheel', 'DomMouseScroll', 'MozMousePixelScroll'];
                   var el = this[0];            //this[0];  jquery对象 转 JS对象(因addEventListener是JS对象的监听事件)
                if( el.addEventListener ){    
                   for( var i = toBind.length; i; ){
                       el.addEventListener(toBind[--i],handleFun,false);
                   }
                }
                else {
                    el.onmousewheel = handleFun;
                }

                //deal with the mousewheel
                function handleFun(e){
                   var driect = 0, delta=0;    //driect:滚动方向  delta:各浏览器监听滚动事件的属性值
                   var e = e || window.event;
                   if ( e.wheelDelta ){ delta = e.wheelDelta }
                   else if ( e.deltaY     ){ delta = e.deltaY * -1 }
                   else if( e.wheelDeltaY ) { delta = e.wheelDeltaY }
                   else { 
                           console.log('get delta,have somethings wrong...');
                   }
                   delta==0 ? console.log('get delta,have somethings wrong...') :
                   delta>0     ? driect=1 : driect=-1;    

                   typeof fn==='function' ? fn( $(el) ,driect ) : '';
                }
            }

        });

应用：

 

$('div').mousewheel(function(dir){
    console.log( dir );
});

 

结果：

 

ok! 成功！！ 至于开始提到的 滑动鼠标，图片的放大缩小功能实现在 《自定义mousewheel事件，实现图片放大缩小功能实现》中是讲述。