zoukankan      html  css  js  c++  java
  • 手机移动端事件封装

    (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();
  • 相关阅读:
    性能战术
    易用性
    可操作性
    软件架构师如何工作
    idea安装
    Windows下安装TensorFlow
    进度十四(11.01)
    进度十三(10.31)
    进度十二(10.30)
    进度十一(10.29)
  • 原文地址:https://www.cnblogs.com/litings/p/8615843.html
Copyright © 2011-2022 走看看