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();
  • 相关阅读:
    http://blog.csdn.net/zhang_xinxiu/article/details/38655311
    三分钟了解Activity工作流
    在eclipse中设计BPMN 2.0工作流定义的根本步骤
    http://blog.csdn.net/bluejoe2000/article/details/39521405#t9
    activity的测试工程activiti-explorer使用
    如何让Activiti-Explorer使用sql server数据库
    Java中对List集合排序的两种方法
    常用 Git 命令清单
    推荐!手把手教你使用Git
    理解RESTful架构
  • 原文地址:https://www.cnblogs.com/litings/p/8615843.html
Copyright © 2011-2022 走看看