JS - 移动设备终端的touch事件
移动设备的大部分交互都是通过触摸touch来实现的，是因为移动设备通常会有一个电容式触摸屏（capacitive touch-sensitive screen），以捕捉用户的手指所做的交互。对于触屏的交互式网站、游戏，触摸事件是相当重要的。Apple在IOS 2.0中引入了触摸事件API，Android正迎头赶上这一事实标准，缩小差距。最近一个W3C工作组正合力制定这一触摸事件规范。
简单介绍一下IOS上的浏览器（主要Safari）所支持的多触式事件模型，然后将触控（Touch）这种简单的动作升级为手势（Gestrue）。
IOS上的Safari也支持click 和mouseover等传统的交互事件，只是不推荐在iOS的浏览器应用上使用click和mouseover，因为这两个事件是为了支持鼠标点击而设计出来的。Click事件在IOS上会有半秒左右的延迟，原因是IOS要highlight接收到click的element。而mouseover/out等事件则会被手指的点击触发。所以，在IOS上，应当抛弃传统的交互事件模型而接受一个新的事件模型。Touch事件和更高级 的Gesture事件，能让你的网页交互起来像native应用一样。
Touch事件是在用户手指放在屏幕上面的时候、在屏幕上滑动的时候或者是从屏幕上移开的时候出发。
Gesture事件则是对touch事件的更高级的封装，主要处理手指slide、rotate、scale等动作。
1、跨移动设备(触屏)常用touch处理事件：
touchstart：当手指触摸屏幕时候触发，即使已经有一个手指放在屏幕上也会触发。 touchmove：当手指在屏幕上滑动的时候连续地触发。在这个事件发生期间，调用preventDefault()事件可以阻止滚动。 touchend：当手指从屏幕上拿起的时候触发。 touchcancel：当系统停止（取消）跟踪touch触摸的时候触发。关于这个事件的确切出发时间，文档中并没有具体说明（不详）。
上面的这些事件都会冒泡，也都可以取消。虽然这些触摸事件没有在DOM规范中定义，但是它们却是以兼容DOM的方式实现的。所以，每个触摸事件的event对象都提供了在鼠标实践中常见的属性：bubbles(起泡事件的类型)、cancelable(是否用 preventDefault() 方法可以取消与事件关联的默认动作)等。
2、每个触摸事件都包括了三个触摸列表（即用于跟踪触摸的属性），每个列表里包含了对应的一系列触摸点（用来实现多点触控）：
touches：当前位于屏幕上的所有手指的一个列表（表示当前跟踪的触摸操作的touch对象的数组）
targetTouches：位于当前DOM元素上的手指的一个列表（特定于事件目标的Touch对象的数组）
changeTouches：涉及当前事件的手指的一个列表（表示自上次触摸以来发生了什么改变的Touch对象的数组）
3、每个触摸点由包含了如下触摸信息（常用重要属性）：
通过touch event handler的event对象取到（一般是通过event.changedTouches属性）。
--- pageX/pageY/clientX/clientY/screenX/screenY：一个数值，动作在屏幕上发生的位置（page包含滚动距离>相对页面，client不包含滚动距离>相对视口>>触摸点相对于浏览器窗口viewport的位置 ，screen以屏幕为基准>相对屏幕）。
--- target：触目的DOM节点目标。（DOM元素，是动作所针对的目标）
--- identifier：标识触摸的唯一ID。（唯一标识触摸会话（touch session）中的当前手指）
--- radiusX/radiusY/rotationAngle：画出大约相当于手指形状的椭圆形，分别为椭圆形的两个半径和旋转角度。（未测试）
最后，来看下几个例子：
demo1：
demo2：
demo3：
转自:
html 移动互联网终端的javascript touch事件,touchstart, touchend, touchmove
WEB前端开发(www.css119.com)–移动互联网终端的touch事件,touchstart, touchend, touchmove
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
