详解移动端的Touch事件
来源:互联网 发布:17173lol数据库 编辑:程序博客网 时间:2024/04/30 00:14
水果公司的那些small and cute的设备给我们提供了前所未有的用户体验。当用户在iphone和ipad上运指如飞的时候,那些使用objective-c写出优秀应用的开发人员们心里一定充满了成就感,因为正是他们(而不是水果)让iOS的世界变的丰富多彩。然而对于我们这些以web为自己事业核心的程序员来说,这种让人欲罢不能的多触式体验似乎跟我们关系不大,因为浏览器那一小块地方就是我们和用户的全部交集了。而许多网站为了让iOS的用户能够在多触式体验下使用自己的服务,都专门花钱开发objective-c的本地程序作为自己web service的客户端。其实,对于一个web程序员或者一个网站来说,如果你的需求仅仅是让iPhone/iPad用户能够正常使用你的服务,那现有的html4页面完全能够满足(也许需要一点点重构,但是很容易);如果再往上一点,你需要让你的web客户端看起来像是用objective-c实现的一样,也并非不可能,只需要将我们熟悉的javascript搬到iOS设备上来就行。
处理Touch事件能让你跟踪用户的每一根手指的位置。你可以绑定以下四种Touch事件:
touchstart: // 手指放到屏幕上的时候触发 touchmove: // 手指在屏幕上移动的时候触发 touchend: // 手指从屏幕上拿起的时候触发 touchcancel: // 系统取消touch事件的时候触发。至于系统什么时候会取消,不详。。
下面就是利用Touch原生事件来做的一些扩展, 减少了我们在Touch原生事件上话费的时间
javascript 扩展:
使用方法:$touch(Dom对象, 类型, 事件函数);
/** * 移动端触摸方法定义 */var $touch = function(obj,type,func) { //滑动范围在5x5内则做点击处理,s是开始,e是结束 var init = {x:5,y:5,sx:0,sy:0,ex:0,ey:0}; var sTime = 0, eTime = 0; type = type.toLowerCase(); obj.addEventListener("touchstart",function(){ sTime = new Date().getTime(); init.sx = event.targetTouches[0].pageX; init.sy = event.targetTouches[0].pageY; init.ex = init.sx; init.ey = init.sy; if(type.indexOf("start") != -1) func(); }, false); obj.addEventListener("touchmove",function() { event.preventDefault();//阻止触摸时浏览器的缩放、滚动条滚动 init.ex = event.targetTouches[0].pageX; init.ey = event.targetTouches[0].pageY; if(type.indexOf("move")!=-1) func(); }, false); obj.addEventListener("touchend",function() { var changeX = init.sx - init.ex; var changeY = init.sy - init.ey; if(Math.abs(changeX)>Math.abs(changeY)&&Math.abs(changeY)>init.y) { //左右事件 if(changeX > 0) { if(type.indexOf("left")!=-1) func(); }else{ if(type.indexOf("right")!=-1) func(); } } else if(Math.abs(changeY)>Math.abs(changeX)&&Math.abs(changeX)>init.x){ //上下事件 if(changeY > 0) { if(type.indexOf("top")!=-1) func(); }else{ if(type.indexOf("down")!=-1) func(); } } else if(Math.abs(changeX)<init.x && Math.abs(changeY)<init.y){ eTime = new Date().getTime(); //点击事件,此处根据时间差细分下 if((eTime - sTime) > 300) { if(type.indexOf("long")!=-1) func(); //长按 } else { if(type.indexOf("tap")!=-1) func(); //当点击处理 } } if(type.indexOf("end")!=-1) func(); }, false);};
本文章由Mr.K整理,切勿用于商业用途
有什么意见或建议请联系在下面留言,觉得没用的请绕道~!
希望大家在这里能学到更多的东西,一起交流先进的前端技术
转自 [Mr.K - 专注前端开发]:http://www.cnkk.me/art/2015/08/144152241244279.html
0 0
- 详解移动端的Touch事件
- 移动端的touch事件
- 移动端web开发---Touch事件详解
- 移动端touch事件
- 移动端click时间、touch事件、tap事件详解
- 移动端click时间、touch事件、tap事件详解
- 移动端的touch事件(二)
- 手机移动端浏览器touch事件系列详解
- 移动端touch事件影响click事件的相关解决方法
- 移动端touch事件和click事件的区别
- 移动端touch事件和click事件的区别
- 移动web(三)touch事件详解
- 移动web 移动端Touch事件
- 移动端touch事件影响click事件
- 2.移动端基础事件---touch事件
- touch gesture 事件在移动端的简单实现
- 移动端冒泡的touch 事件挡也挡不住
- android的touch事件详解
- Stephen的蓝牙&安卓学习历程
- 解决sqljdbc 连接 sqlserver 2008时在getConnection后停住的问题
- JavaMail发送邮件
- SQL基础--合并查询(union,union all,intersect,minus)用法与介绍
- 对象加强 分层思想加强 计算机表示方法
- 详解移动端的Touch事件
- UIScrollView的frame,contentSize,contentOffset,contentInset属性
- Lytro的教训:曾经的光场神器为何不行了?
- Netty是什么?
- iOS 两个app之间的跳转
- cocos2d-x 3.8.1 Widget 置灰的实现
- XCode工程中 Project 和 Targets区别
- 在对话框中显示bmp图片
- Spring3.x中各个jar包的作用总结