指尖下的js ——多触式web前端开发之一：对于Touch的处理

小码哥近来忽然想到当初的一个面试题，就是让我描述相似刮刮乐那样刮卡的效果。当时瞬间我就迷茫了，只记得本身当初的回答，不着边际，生硬的要死。也就没有后文了，，，，，

所以，小码哥去找度娘了，度娘给我新的启发，感受本身的思惟始终是围绕着本身的知识量的多少转动的。我对此也是自醉了......

下面是在度娘搜索中看到的一片文章，讲的比较通俗易懂。所以就引用过来了，以备未来自用。嘎嘎

水果公司的那些small and cute的设备给咱们提供了史无前例的用户体验。当用户在iphone和ipad上运指如飞
的时候，那些使用objective-c写出优秀应用的开发人员们内心必定充满了成就感，由于正是他们（而不是水果
）让iOS的世界变的丰富多彩。然而对于咱们这些以web为本身事业核心的程序员来讲，这种让人欲罢不能的多
触式体验彷佛跟咱们关系不大，由于浏览器那一小块地方就是咱们和用户的所有交集了。而许多网站为了让iOS
的用户可以在多触式体验下使用本身的服务，都专门花钱开发objective-c的本地程序做为本身web service的客
户端。 

  其实，对于一个web程序员或者一个网站来讲，若是你的需求仅仅是让iPhone/iPad用户可以正常使用你的
服务，那现有的html4页面彻底可以知足（也许须要一点点重构，可是很容易）；若是再往上一点，你须要让你
的web客户端看起来像是用objective-c实现的同样，也并不是不可能，只须要将咱们熟悉的javascript搬到iOS设
备上来就行。 
    本文从一个多触式网页开发初学者的角度，首先简单介绍一下iOS上的浏览器（这里主要指Safari）所支持的
多触式事件模型，而后将触控（Touch）这种简单的动做升级为手势（Gestrue），最后将javascript + html + 
css构建的应用脱离浏览器，放到iOS设备的屏幕上成为一个本地link并和植物大战僵尸放到一块儿。 
    iOS上的Safari也支持click 和mouseover等传统的交互事件，只是不推荐在iOS的浏览器应用上使用click和
mouseover，由于这两个事件是为了支持鼠标点击而设计出来的。Click事件在iOS上会有半秒左右的延迟，原
因是iOS要highlight接收到click的element。而mouseover/out等事件则会被手指的点击触发。因此，在iOS上
，应当抛弃传统的交互事件模型而接受一个新的事件模型。Touch事件和更高级的Gesture事件，能让你的网页
交互起来像native应用同样。 
    处理Touch事件能让你跟踪用户的每一根手指的位置。你能够绑定如下四种Touch事件：

touchstart:  // 手指放到屏幕上的时候触发

touchmove:  // 手指在屏幕上移动的时候触发

touchend:  // 手指从屏幕上拿起的时候触发

touchcancel:  // 系统取消touch事件的时候触发。至于系统何时会取消，不详。。

Gesture事件则是对touch事件的更高级的封装，主要处理手指slide、rotate、scale等动做，将在下一篇文章
详述。 
    在开始描述touch事件以前，须要先描述一下多触式系统中特有的touch对象（android和iOS乃至nokia最新
的meego系统都模拟了相似的对象，这里只针对iOS，由于我只有iPad可用于测试。。）。这个对象封装一次
屏幕触摸，通常来自于手指。它在touch事件触发的时候产生，能够经过touch event handler的event对象取到
（通常是经过event.changedTouches属性）。这个对象包括一些重要的属性： 

client / clientY： // 触摸点相对于浏览器窗口viewport的位置

pageX / pageY： // 触摸点相对于页面的位置

screenX /screenY： // 触摸点相对于屏幕的位置

identifier： // touch对象的unique ID

CSS代码：

.spirit {              /* 方块的class名称*/

          position : absolute ;

          width : 50px ;

          height : 50px ;

          background-color : red ;

}

而后，在body下定义一个接收事件的容器，这里body的height必须是100%才能占满整个viewport： 

Html：

< body  style=”height: 100%;margin:0;padding:0”>

< div  id=”canvas”  style=”position: relative;width:100%;height: 100%;”></ div >

</ body >

定义touchstart的事件处理函数，并绑定事件：

Javascript代码 ：

// define global variable

var  canvas = document.getElementById(“canvas”),

        spirit, startX, startY;

     // touch start listener

function  touchStart(event) {

          event.preventDefault();

          if  (spirit ||! event.touches.length) return ;

          var  touch = event.touches[0];

          startX = touch.pageX;

          startY = touch.pageY;

          spirit = document.createElement(“div”);

          spirit.className = “spirit”;

          spirit.style.left = startX;

          spirit.style.top = startY;

          canvas.appendChild(spirit);

}

// add touch start listener

canvas.addEventListener(“touchstart”, touchStart, false );

首先，咱们将方块spirit做为一个全局对象，由于咱们如今要测试单根手指因此屏幕上最好只有一个物体在移动

（等会有多触实例）。在touchStart这个事件处理函数中，咱们也首先判断了是否已经产生了spirit，也就是是
否已经有一个手指放到屏幕上，若是是，直接返回。 
    和传统的event listener同样，多触式系统也会产生一个event对象，只不过这个对象要多出一些属性，好比
这里的event.touches，这个数组对象得到屏幕上全部的touch。注意这里的event.preventDefault()，在传统的
事件处理函数中，这个方法阻止事件的默认动做，触摸事件的默认动做是滚屏，咱们不想屏幕动来动去的，所
以先调用一下这个函数。咱们取第一个touch，将其pageX/Y做为spirit建立时的初始位置。接下来，咱们建立
一个div，而且设置className，left，top三个属性。最后，咱们把spirit对象appendChild到容器中。这样，
当第一根手指放下的时候，一个红色的，50px见方的方块就放到屏幕上了。 
    而后，咱们要开始处理手指在屏幕上移动的事件： 

Javascript代码 ：

function  touchMove(event) {

          event.preventDefault();

          if  (!spirit || !event.touches.length) return ;

          var  touch = event.touches[0],

               x = touch.pageX – startX,

               y = touch.pageY – startY;

          spirit.style.webkitTransform = 'translate('  + x + 'px, '  + y + 'px)' ;    

}

Canvas.addEventListener(“touchmove”, touchMove, false );

在touch move listener中，咱们使用webkit特有的css属性：webkitTransform来移动方块，这个属性具体怎么用请google之。建议构造面向iOS设备的网页的时候尽可能使用webkit本身的特性，不但炫，更能够直接利用硬件来提升性能。 

    最后，咱们处理touchend事件。手指提起的时候方块从屏幕上移除。

function  touchEnd(event) {

          If (!spirit) return ;

          canvas.removeChild(spirit);

          spirit = null ;

}

canvas.addEventListener(“touchend”, touchEnd, false );

在你的ipad或者iphone上测试一下以上代码。若是不出意外的话，一个完整的多触式web程序就诞生了。。 
这种事件处理模式虽然可以知足咱们开发多触式网页应用的需求，可是start – move – end的流程有点繁琐，
能不能封装一些经常使用的动做让咱们用一个event handler就能解决问题呢。没错，Gesture事件就是为了这个目
的设计出来的，它封装了手指的scale, slide, rotate等经常使用的动做。不过，下一章咱们再来讨论这个问题。。 
附件是一个更加复杂一些的例子，每根手指放下的时候都会产生一个不一样颜色的方块，手指动的时候方块跟着
动，手指提起的时候方块消失，请下载查看试用。 
经过附件所包含的实例，咱们能够看出一些较为隐蔽的特性。首先，这里咱们没有再使用event.touches取全部
touch的对象，而是使用event.changedTouches这个数组，用来取得全部跟本次事件相关的touch。可是，这
里我发现一个奇怪的特性，不知道是个人ipad有问题仍是原本就是这样，就是在有多根手指放在屏幕上的时候
，若是提起一根手指，touchend事件的changedTouches中会包含全部手指的touch对象，而后，其余几根留
在屏幕上的手指会从新触发touchstart，并刷新全部的touch对象（identifier都不同了）。若是这是一个全部
设备都有的特性，那么将给编程者带来一些不便，不知道水果为啥要这么处理。 

文章来源：http://www.cnblogs.com/pifoo/archive/2011/05/23/webkit-touch-event-1.html