Html5新瓶装老酒之一--Touch事件处理

移动端的应用越来越多的开始采用html5来实现的。Html5有许多新特性需要开发者注意，比如css3,touch事件等等。比如做一个轮播图，分析其实现要领，有三点：

1.图片的轮播效果对应的css 样式;

2.定时操控函数改变css样式来实现动画;

3.绑定触摸事件对动画的播放进行控制。

在原来的桌面js开发中，jQuery应用非常广泛；而在移动端的js开发中，Zepto更胜一筹。Zepto为很大程度上接近兼容jQuery的js 轻量lib库,只考虑对主流移动浏览器web-kit核心进行支持。

在触摸事件的绑定上，采用Zepto的swipeRight和swipeLeft事件处理:

$(cache.player).swipeLeft(function(){

处理动画的播放控制；

});

这就是典型的事件绑定回调函数，与常见的

$(btn).click(function(){

处理点击事件；

});

点击绑定非常近似，

只不过事件的名字不同而已。

在chrome dev tools顺利通过iphone和galaxy的模拟，但是在iphone，android真机内嵌浏览器下，还是出现了意想不到的问题：

1. 在iphone上滑动基本无效；

2. 在小米和三星上，左滑幅度大的话等于退出移动客户端的内嵌浏览器。

这是为什么呢？第二个问题移动客户端的内嵌浏览器左滑幅度大的问题是内嵌浏览器在滑动下自带默认操作，方便在内嵌浏览器和客户端实现切换吧。

第一个问题就比较头痛了，闪过了debug的念头。在手机端debug，难道要装个debug工具在手机上？或者来个真机模拟测试？男默女泪，人艰不拆。以上想法实现起来都没有现成的，可行的目前只有jsConsole。JsConsole的调试方法，就是包含一个http://jsconsole.com/生成的Javascript文件。在调试时，移动端会连接到远程服务器上并把console.log的内容在服务端上显示，达到debug的目的。

相应的也对zepto的touch事件代码进行了分析：

$(document) .on('touchstart MSPointerDown pointerdown', function(e){})

.on('touchmove MSPointerMove pointermove', function(e){})

.on('touchend MSPointerUp pointerup', function(e){

…

if ((touch.x2 && Math.abs(touch.x1 - touch.x2) > 30) ||

(touch.y2 && Math.abs(touch.y1 - touch.y2) > 30)){

//swipeTimeout = setTimeout(function() {

touch.el.trigger('swipe')

touch.el.trigger('swipe' + (swipeDirection(touch.x1, touch.x2, touch.y1, touch.y2)))

touch = {}

//}, 0)

}

…

})

代码中可见有三个事件绑定函数。这三个绑定事件为touchstart,touchmove,touchend。在滑动时，手刚点上触摸屏，会触发touchstart事件，移动时每隔十几毫秒会进行touchmove事件的触发，手从触摸屏上移走会触发touchend事件。

 在W3C的touchEvent文档中有callback函数的e有说明

interface TouchEvent : UIEvent {

readonly attribute TouchList touches;

readonly attribute TouchList targetTouches;

readonly attribute TouchList changedTouches;

readonly attribute boolean altKey;

readonly attribute boolean metaKey;

readonly attribute boolean ctrlKey;

readonly attribute boolean shiftKey;

};

其中touches和changedTouches中有对触摸点对象的封装

对于任何滑动事件的处理，思路如下：在touchEnd和touchStart触发时做一个touch对象的数据记录，比较两者的移动距离来界定其是左滑还是右滑来进行相应回调的触发即可进行左滑、右滑的事件处理。

iphone中内嵌浏览器Zepto为什么存在问题呢，主要是其在touchEnd中回调时启用了

swipeTimeout = setTimeout(function() {

touch.el.trigger('swipe')

touch.el.trigger('swipe' + (swipeDirection(touch.x1, touch.x2, touch.y1, touch.y2)))

touch = {}

}, 0) setTimeout定时函数。这个定时函数在iphone上经常没有机会执行。导致程序的swipeLeft，swipeRight事件在内嵌浏览器无法被触发导致，在safari和chrome下没有问题。这也说明了zepto的兼容性比较差。

移动端的问题基本上是对旧有事件体系的一种扩充，由于移动端存在多种浏览器的兼容性的问题，因此一些个性化的问题会存在。相信这些问题在HTML5长期的改进中会得到解决。

参考文献：

1.触摸事件： http://www.w3.org/TR/touch-events/

2.关于js定时器的深入研究：http://ejohn.org/blog/how-javascript-timers-work/