移动端滑动方向判断
2015-07-21 12:05
369 查看
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);
相关文章推荐
- Android 项目框架
- Apk签名
- app发布证书、真机调试证书、测试证书、推送证书详细过程
- Android Studio NDK编译Error
- unity3d 血液
- ios设备抓包方法
- android应用移动到SD卡_如何允许移动?_android:installLocation属性使用
- 【tool】Android应用测试经验总结
- android图片模糊处理 利用高斯算法
- 构建变种版本
- android开发需要掌握的一些常用命令
- (转)[Android实例] 关于使用ContentObserver监听不到删除短信会话的解决方案
- IOS数据持久化之一属性列表(或偏好设置)
- Appcan 日期控件
- Android Fragment 基本了解(图文介绍)
- AppCan与中华女子学院合作:移动端技术助力大学生就业创业
- Android--判断发送短信后的状态/发送成功Or发送失败
- Android中Message传递参数(bundle setData方式传递)
- Android:管理应用内存
- 手把手教你打造一个Material Design风格的App(一)