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)