Zepto.js库touch模块代码解析

Zepto.js也许并不陌生，专门针对移动端开发，Zepto有一些基本的触摸事件可以用来做触摸屏交互（tap事件、swipe事件），Zepto是不支持IE浏览器的。
下面来解析一些Zepto.js触摸事件的解析：
1.触摸事件离不开:
     touchstart:手指触摸屏幕上的时候触发
     touchmove:手指在屏幕上移动的时候触发
     touchend:手指从屏幕上拿起的时候触发
     touchcancel:系统取消touch事件的时候触发
2.事件的event事件对象：event
event
  Touch对象包含的数组
  clentX: 触摸目标在窗口中的x坐标
  clientY: 触摸目标在窗口中的y坐标
  identifier: 标识触摸的唯一ID
  pageX： 触摸目标在页面中的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, longTapTimeout

function 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 = null
　　if (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 = null
　　touch = {}
}
$(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 = now
　　　　longTapTimeout = 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阻止机器默认touch
　　　　e.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 = cancelAll
　　touch.el.trigger(event) //触发

// 立即触发双击
if (touch.isDoubleTap) { //判读是不是双击
　　touch.el.trigger('doubleTap') //触发
　　touch = {}
}
// 判断是否单击 250ms后触发单击 
else {
　　touchTimeout = setTimeout(function(){
　　touchTimeout = null
　　touch.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)