zoukankan      html  css  js  c++  java
  • 移动端滑动方向判断

    function touches(obj,direction,fun){  
        //obj:ID对象  
        //direction:swipeleft,swiperight,swipetop,swipedown,singleTap,touchstart,touchmove,touchend  
        //          划左,    划右,     划上,   划下,    点击,    开始触摸, 触摸移动, 触摸结束  
        //fun:回调函数  
        var defaults = {x: 5,y: 5,ox:0,oy:0,nx:0,ny:0};  
        direction=direction.toLowerCase();  
        //配置:划的范围在5X5像素内当点击处理  
        obj.addEventListener("touchstart",function() {
            defaults.ox = event.targetTouches[0].pageX;  
            defaults.oy = event.targetTouches[0].pageY;  
            defaults.nx = defaults.ox;  
            defaults.ny = defaults.oy;  
            if(direction.indexOf("touchstart")!=-1)fun();  
        }, false);  
        obj.addEventListener("touchmove",function() {  
            event.preventDefault();  
            defaults.nx = event.targetTouches[0].pageX;  
            defaults.ny = event.targetTouches[0].pageY;  
            if(direction.indexOf("touchmove")!=-1)fun();  
        }, false);  
        obj.addEventListener("touchend",function() {  
            var changeY = defaults.oy - defaults.ny;  
            var changeX = defaults.ox - defaults.nx;  
            if(Math.abs(changeX)>Math.abs(changeY)&&Math.abs(changeY)>defaults.y){  
                //左右事件  
                if(changeX > 0) {  
                    if(direction.indexOf("swipeleft")!=-1)fun();  
                }else{  
                    if(direction.indexOf("swiperight")!=-1)fun();  
                }  
            }else if(Math.abs(changeY)>Math.abs(changeX)&&Math.abs(changeX)>defaults.x){  
                //上下事件  
                if(changeY > 0) {  
                    console.log('a');
                    if(direction.indexOf("swipetop")!=-1)fun();  
                }else{  
                    if(direction.indexOf("swipedown")!=-1)fun();  
                }  
            }else{  
                //点击事件  
                if(direction.indexOf("singleTap")!=-1)fun();  
            }  
            if(direction.indexOf("touchend")!=-1)fun();  
        }, false);  
    }  
    function fun(){
        console.log('回调函数');
    }
    var swipetop = 'swipetop';
    window.onload=touches(window,swipetop);
  • 相关阅读:
    SAP PI 如何实现消息定义查询
    EWM与ERP交互程序
    ITS Mobile Template interpretation failed. Template does not exist
    SAP Material Flow System (MFS) 物料流系统简介
    SAP EWM Table list
    EWM RF 屏幕增强
    SAP EWM TCODE list
    SAP扩展仓库管理(SAPEWM)在线研讨会笔记
    ERP与EWM集成配置ERP端组织架构(二)
    EWM RF(Radio Frequency)简介
  • 原文地址:https://www.cnblogs.com/fanxiaowu/p/4664064.html
Copyright © 2011-2022 走看看