手机移动端事件封装

(function(window){
        function myQuery(selector) {
            return myQuery.prototype._init(selector);
        }

        myQuery.prototype = {
            _init: function(selector){
                if(typeof selector == "string"){
                    this.ele = document.querySelector(selector);
                    return this;
                }
            },
            touchstart: function(handler){
                this.ele.addEventListener("touchstart",handler)
            },
            touchmove: function(handler){
                this.ele.addEventListener("touchmove",handler)
            },
            touchend: function(handler){ 
                this.ele.addEventListener("touchend",handler);
            },
            tap: function(handler){ // 点击事件
                var startTime,endTime;
                this.ele.addEventListener("touchstart",touchFn);
                this.ele.addEventListener("touchend",touchFn);
                function touchFn(e){
                    e.preventDefault();
                    switch (e.type){
                        case "touchstart":
                            startTime = new Date().getTime();
                            break;
                        case "touchend":
                            endTime = new Date().getTime();
                            if(endTime - startTime < 500){
                                handler.call(this,e);
                            }
                            break;
                    }
                }
            },
            longtag: function(handler){ //长按事件
                this.ele.addEventListener("touchstart",touchFn);
                this.ele.addEventListener("touchmove",touchFn);
                this.ele.addEventListener("touchend",touchFn);
                var timerId;
                function touchFn(e){
                    switch (e.type){
                        case "touchstart":
                            timerId = setTimeout(function(){
                                handler.call(this,e)
                            },500);
                            break;
                        case "touchmove":
                            clearInterval(timerId);
                            break;
                        case "touchend":
                            clearTimeout(timerId);
                            break;
                    }
                }
            },
            slideLeft: function(handler){
                this.ele.addEventListener("touchstart",touchFn);
                this.ele.addEventListener("touchend",touchFn);
                var startX, startY, endX, endY;
                function touchFn(e){
                    var firstTouch = e.changedTouches[0];
                    switch (e.type) {
                        case "touchstart":
                            startX = firstTouch.pageX;
                            startY = firstTouch.pageY;
                            break;
                        case "touchend":
                            endX = firstTouch.pageX;
                            endY = firstTouch.pageY;
                            if(Math.abs(endX-startX) >= Math.abs(endY-startY) && startX - endX >25){
                                handler.call(this,e);
                            }
                            break;
                    }
                }
            },
            slideRight: function(handler){
                this.ele.addEventListener('touchstart',touchFn);
                this.ele.addEventListener('touchend',touchFn);
                var startX, startY, endX, endY;
                function touchFn(e){
                    var firstTouch = e.changedTouches[0];
                    switch (e.type) {
                        case "touchstart":
                            startX = firstTouch.pageX;
                            startY = firstTouch.pageY;
                            break;
                        case "touchend":
                            endX = firstTouch.pageX;
                            endY = firstTouch.pageY;
                            if(Math.abs(endX-startX)>= Math.abs(endY-startY) && endX - startX  >25){
                                handler.call(this,e);
                            }
                            break;
                    }
                }
            },
            follow: function(){//跟随事件
                this.ele.addEventListener("touchstart",touchFn)
                this.ele.addEventListener("touchmove",touchFn);
                var currentLeft, currentTop, startX, startY, moveX, moveY;
                function touchFn(event){
                    switch (event.type){
                        case "touchstart":
                            currentLeft = parseInt(this.offsetLeft);
                            currentTop = parseInt(this.offsetTop);
                            startX = event.touches[0].pageX;
                            startY = event.touches[0].pageY;
                            break;
                        case "touchmove":
                            moveX = event.touches[0].pageX;
                            moveY = event.touches[0].pageY;
                            this.style.marginLeft = currentLeft+(moveX-startX)+"px";
                            this.style.marginTop = currentTop+(moveY-startY)+"px";
                            break;
                    }
                }
            }
        }
        window.$ = myQuery;
    })(window);
  $(div).follow();

 

你可能感兴趣的:(手机移动端事件封装)