製做jquery插件2-滾輪事件的插件

時間 2019-12-01

原文原文鏈接

在上一小節中咱們使用jquery.fn.extend爲jquery新增了兩個新的方法，這一節來製做滾輪事件的插件。javascript

1.準備好已經作好兼容的滾輪事件函數：css

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)代替調用該方法的對象,但由於要調用的原生的方法，因此須要轉化一下：html

$.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的指向：java

最終代碼：jquery

$.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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。