博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
touch方向
阅读量:5934 次
发布时间:2019-06-19

本文共 3533 字,大约阅读时间需要 11 分钟。

hot3.png

var slider = {            //判断设备是否支持touch事件            touch:("ontouchstart" in window) || window.DocumentTouch && document instanceof DocumentTouch,            //事件            events:{            slider:document,                handleEvent:function(event){                if(event.type == "touchstart"){                    this.start(event);                }else if(event.type == "touchmove"){                    this.move(event);                }else if(event.type == "touchend"){                    this.end(event);                }            },            //滑动开始            start:function(event){                //touches数组对象获得屏幕上所有的touch,取第一个touch                var touch = event.targetTouches[0];                //取第一个touch的坐标值                startPos = {x:touch.pageX,y:touch.pageY,time:+new Date};                //这个参数判断是垂直滚动还是水平滚动                isScrolling = 0;                this.slider.addEventListener("touchmove",this,false);                this.slider.addEventListener("touchend",this,false);            },            //移动            move:function(event){                //当屏幕有多个touch或者页面被缩放过,就不执行move操作                if(event.targetTouches.length > 1 || event.scale && event.scale !== 1) return;                var touch = event.targetTouches[0];                endPos = {x:touch.pageX - startPos.x,y:touch.pageY - startPos.y};                //isScrolling为1时,表示纵向滑动,0为横向滑动                isScrolling = Math.abs(endPos.x) < Math.abs(endPos.y) ? 1:0;                if(isScrolling === 1){                    //阻止触摸事件的默认行为,即阻止滚屏                    event.preventDefault();                }            },            //滑动释放            end:function(event){                //滑动的持续时间                var duration = +new Date - startPos.time;                var i = 0;                if(Number(duration) > 10 && isScrolling){                    if(isScrolling === 1){                        //判断是上移还是下移,当偏移量大于10时执行                        if(endPos.y < -10){                            i = 1;                        }else if(endPos.y > 10){                            i = 3;                        }                    }else if(isScrolling === 0){                        //判断是左移还是右移,当偏移量大于10时执行                        if(endPos.x > 10){                            i = 2;                        }else if(endPos.x < -10){                            i = 4;                        }                    }                    this.callback(i);                    startPos = endPos = null;                    return false;                }                //解绑事件                this.slider.removeEventListener("touchmove",this,false);                this.slider.removeEventListener("touchend",this,false);            },            //要执行函数            callback:function(direction){                //上右下左1234                switch(direction){                    case 1:                        alert("上");                        break;                    case 2:                        alert("右");                        break;                    case 3:                        alert("下");                        break;                    case 4:                        alert("左");                        break;                    default:                        break;                };            },        },        //初始化        init:function(){            if(!!this.touch) this.events.slider.addEventListener("touchstart",this.events,false);        }        };        slider.init();

 

转载于:https://my.oschina.net/u/1428820/blog/1577140

你可能感兴趣的文章
论代码审查的重要性
查看>>
「docker实战篇」python的docker爬虫技术-导学(一)
查看>>
linux日志基础介绍
查看>>
如何关闭SElinux
查看>>
处理器之MMU(三)
查看>>
172.16.82.0/25的含义,IP段,掩码
查看>>
跨域CORS
查看>>
测试之路
查看>>
JQuery选择器总结
查看>>
终于对了
查看>>
RabbitMQ集群
查看>>
Apache防盗链和隐藏版本信息
查看>>
ARP协议与路由
查看>>
使用pypiserver搭建私有源
查看>>
raid及mdadm
查看>>
SCI检索介绍
查看>>
Android开发之生成自己的签名文件及App签名打包
查看>>
如何提高阿里云上应用的可用性(二)
查看>>
Java NIO Channel (netty源码死磕1.3)
查看>>
云宏WinCloud前端工程师告诉你什么是UI扁平化
查看>>