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

90 阅读 0 评论 60 点赞

我是靠谱客的博主冷静学姐，最近开发中收集的这篇文章主要介绍制作jquery插件2-滚轮事件的插件，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

在上一小节中我们使用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>