制作jquery插件2-滚轮事件的插件

来源：互联网发布：华为云计算岗位及年薪编辑：程序博客网时间：2024/06/08 14:58

在上一小节中我们使用jquery.fn.extend为jquery新增了两个新的方法，这一节来制作滚轮事件的插件。

1.准备好已经做好兼容的滚轮事件函数：

function mousewheel(obj,fnWheel){        if (obj.addEventListener){        obj.addEventListener("DOMMouseScroll",fn,false);        }            if (obj.attachEvent){        obj.attachEvent("onmousewheel",fn);        };        obj.onmousewheel=fn;        function fn(ev){                var oEvent=ev||event;                var down=true;        if (oEvent.wheelDelta){            down=oEvent.wheelDelta<0;            }        else{            down=oEvent.detail>0;            };        fnWheel(down,oEvent);                if (oEvent.preventDefault){            oEvent.preventDefault();            };                return false;        };    };

2.在原函数里绑定事件的对象是作为参数传过去的，在extend里可以用$(this)代替调用该方法的对象,但因为要调用的原生的方法，所以需要转化一下：

$.fn.extend({    mousewheel:function (fnWheel){                if ($(this).get(0).addEventListener){            $(this).get(0).addEventListener("DOMMouseScroll",fn,false);            }                    if ($(this).get(0).attachEvent){            $(this).get(0).attachEvent("onmousewheel",fn);            };                $(this).get(0).onmousewheel=fn;                function fn(ev){                        var oEvent=ev||window.event;                        var down=true;            if (oEvent.wheelDelta){                down=oEvent.wheelDelta<0;                }            else{                down=oEvent.detail>0;                };            fnWheel(oEvent,down);                        if (oEvent.preventDefault){                oEvent.preventDefault();                };                        return false;        };    }});

3.现在这个插件还有一个问题，就是如果在前台调用this的时候指向不对，原因就在于回调函数fnWheel是window调用的，可以使用call方法改变this的指向：

最终代码：

$.fn.extend({    mousewheel:function (fnWheel){        if ($(this).get(0).addEventListener){            $(this).get(0).addEventListener("DOMMouseScroll",fn,false);            }                    if ($(this).get(0).attachEvent){            $(this).get(0).attachEvent("onmousewheel",fn);            };                $(this).get(0).onmousewheel=fn;                function fn(ev){                        var oEvent=ev||window.event;                        var down=true;            if (oEvent.wheelDelta){                down=oEvent.wheelDelta<0;                }            else{                down=oEvent.detail>0;                };            fnWheel.call(this,oEvent,down);                        if (oEvent.preventDefault){                oEvent.preventDefault();                };                        return false;        };    }});

在前台调用该插件例子：

<!doctype html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style type="text/css">#div1{    height: 500px;    width: 500px;    background-color: #ccc;}</style><script type="text/javascript" src="jquery-1.11.0.js"></script><script type="text/javascript" src="extend-mouseWheel.js"></script><script type="text/javascript">$(function (){    $("#div1").mousewheel(function (event,down){        alert(this.tagName);//弹出DIV    });});</script></head><body><div id="div1"></div></body></html>

阅读全文

0 0