Zepto.js库touch模块代码解析

Zepto.js也许并不陌生，专门针对移动端开发，Zepto有一些基本的触摸事件可以用来做触摸屏交互（tap事件、swipe事件），Zepto是不支持IE浏览器的。
下面来解析一些Zepto.js触摸事件的解析：
1.触摸事件离不开:touchstart:手指触摸屏幕上的时候触发touchmove:手指在屏幕上移动的时候触发touchend:手指从屏幕上拿起的时候触发touchcancel:系统取消touch事件的时候触发
2.事件的event事件对象：event
eventTouch对象包含的数组clentX: 触摸目标在窗口中的x坐标clientY: 触摸目标在窗口中的y坐标identifier: 标识触摸的唯一IDpageX： 触摸目标在页面中的x坐标pageY： 触摸目标在页面中的y坐标screenX： 触摸目标在屏幕中的x坐标screenY： 触摸目标在屏幕中的y坐标target：触摸的DOM节点目标有了这些就可以解析Zeptho.js的touch模块了：看代码吧！
// Zepto.js
// (c) 2010-2012 Thomas Fuchs
// Zepto.js may be freely distributed under the MIT license.
;(function($){var touch = {},touchTimeout, tapTimeout, swipeTimeout,longTapDelay = 750, longTapTimeoutfunction parentIfText(node) {return 'tagName' in node ? node : node.parentNode
}
//判断left或right或上或下滑动
function swipeDirection(x1, x2, y1, y2) {var xDelta = Math.abs(x1 - x2), yDelta = Math.abs(y1 - y2)return xDelta >= yDelta ? (x1 - x2 > 0 ? 'Left' : 'Right') : (y1 - y2 > 0 ? 'Up' : 'Down')
}
function longTap() {longTapTimeout = nullif (touch.last) {touch.el.trigger('longTap')touch = {}}
}
function cancelLongTap() { if (longTapTimeout) clearTimeout(longTapTimeout)longTapTimeout = null}
//取消所有定时器
function cancelAll() {if (touchTimeout) clearTimeout(touchTimeout)if (tapTimeout) clearTimeout(tapTimeout)if (swipeTimeout) clearTimeout(swipeTimeout)if (longTapTimeout) clearTimeout(longTapTimeout)touchTimeout = tapTimeout = swipeTimeout = longTapTimeout = nulltouch = {}
}
$(document).ready(function(){var now, delta
$(document.body) //手指点击后触发
.bind('touchstart', function(e){now = Date.now()delta = now - (touch.last || now)touch.el = $(parentIfText(e.target))touchTimeout && clearTimeout(touchTimeout)touch.x1 = e.pageX //获取x坐标touch.y1 = e.pageY //获取y坐标if (delta > 0 && delta <= 250) touch.isDoubleTap = true //判断是双击touch.last = nowlongTapTimeout = setTimeout(longTap, longTapDelay) //手指触摸时间750触发
}) //手指滑动屏幕触发
.bind('touchmove', function(e){cancelLongTap()touch.x2 = e.pageX //手指移动x坐标touch.y2 = e.pageY //手指移动y坐标if (Math.abs(touch.x1 - touch.x2) > 10) //滑动大于10阻止机器默认touche.preventDefault()
}) //手指从屏幕上拿起的时候触发 
.bind('touchend', function(e){cancelLongTap()
// swipe 滑动x大于30px
if ((touch.x2 && Math.abs(touch.x1 - touch.x2) > 30) ||
(touch.y2 && Math.abs(touch.y1 - touch.y2) > 30))
//滑动y大于30px
//触发滑动swipeTimeout = setTimeout(function() {touch.el.trigger('swipe')touch.el.trigger('swipe' + (swipeDirection(touch.x1, touch.x2, touch.y1, touch.y2)))touch = {} //判断滑动触发方向并触发滑动事件
}, 0)
// normal tap
else if ('last' in touch)// 延迟1分钟，这样我们可以取消“点击”事件，如果“滚动”触发
//
tapTimeout = setTimeout(function() {// 如果是tap事件触发取消所有cancelAll函数的定时器 直接触发tap事件// (cancelTouch cancels processing of single vs double taps for faster 'tap' response)var event = $.Event('tap')event.cancelTouch = cancelAlltouch.el.trigger(event) //触发// 立即触发双击
if (touch.isDoubleTap) { //判读是不是双击touch.el.trigger('doubleTap') //触发touch = {}
}
// 判断是否单击 250ms后触发单击 
else {touchTimeout = setTimeout(function(){touchTimeout = nulltouch.el.trigger('singleTap') //触发点击touch = {}
}, 250)
}}, 0)
})$(window).bind('scroll', cancelAll)
})
//绑定事件
;['swipe', 'swipeLeft', 'swipeRight', 'swipeUp', 'swipeDown', 'doubleTap', 'tap', 'singleTap', 'longTap'].forEach(function(m){$.fn[m] = function(callback){ return this.bind(m, callback) }
})
})(Zepto)