理解iOS中的touch事件

touch事件是iOS中最重要的事件。

一、简介

Apple的官方文档Handling Events和 Safari CSS Visual Effects Guide是很好的开发指南，但是里面的内容显然是针对初学者的，我在这里补充一下。另外，Apple开发者中心有很多不错的HTML5教程与资源，例如HTML5离线存储，CSS动画，CSS 3D变换等，有兴趣的可以了解一下。 http://developer.apple.com/library/safari/navigation/

二、监听touch事件

最简单的办法就是，使用element.addEventListener(touchevent,handler,usercapture)来捕捉事件。touch事件的类型有touchstart,touchmove,touchend,touchcancel。在实际使用中，如果你比较习惯模块式开发，你可以使用如下方式捕捉事件，显得更"优雅"。

var function anObject = {
          handleEvent: function(e){
              switch(e.type){
                  case "touchstart":
                  //YOUR CODE HERE
                  break;
                  case "touchsmove":
                  //YOUR CODE HERE
                  break;
                  case "touchend":
                  //YOUR CODE HERE
                  break;
              }
          }
    };
anElement.addEventListener("touchstart",anObject,false);
anElement.addEventListener("touchmove",anObject,false);
anElement.addEventListener("touchend",anObject,false);

或者

var function anObject = {
          onTouchStart : function(e){
          //YOUR CODE HERE
          }
          onTouchMove : function(e){
          //YOUR CODE HERE
          }
          onTouchEnd : function(e){
          //YOUR CODE HERE
          }
    };
anElement.addEventListener("touchstart",function(e){return anObject.onTouchStart(e)},false);
anElement.addEventListener("touchmove",function(e){return anObject.onTouchMove(e),false);
anElement.addEventListener("touchend",function(e){return anObject.onTouchEnd(e),false);

三、touch事件的属性

touch事件的重要属性有以下几个:

1. clientX:X轴坐标，相对于viewport，除去滚动。
2. clientY:轴坐标，相对于viewport，除去滚动。
3. screenX:X轴坐标，相对于显示器屏幕。
4. screenY:Y轴坐标，相对于显示器屏幕。
5. pageX:X轴坐标，相对于HTML文档，包括滚动。
6. pageY::Y轴坐标，相对于HTML文档，包括滚动。
7. target导致此事件发生的元素。
8. identifier:事件的唯一内部ID。

四、多点触摸的奥秘

本文的重点在于此，虽然iOS中提供了gesture event，但是如果我们需要定制自己的手势，还要深入进行研究。touchevent有如下三个属性，记录了从手指接触屏幕，到离开屏幕的全部过程。

1. e.touches:保存你每一个手指落到屏幕上导致的touch事件的信息。
2. e.targetTouches:只保存手指落到同一个元素上导致的touch事件的信息。
3. e.changedTouches:保存导致touch事件发生改变的touch事件信息

五、实例操作

看到这里你可能完全迷糊了，没关系，亲手体验一下下面的例子就明白这三个属性是如何协同工作的了，如果你使用iOS系统，可以使用手指操作下面的白色区域，仔细观察一下，就明白了。