模块基于
- Gesture
上的
- IOS
事件的封装,利用
- Gesture
属性,封装出
- scale
系列事件。
- pinch
读 Zepto 源码系列文章已经放到了github上,欢迎star: reading-zepto
本文阅读的源码为 zepto1.2.0
《reading-zepto》
- ;(function($){
- if ($.os.ios) {
- var gesture = {}, gestureTimeout
- $(document).bind('gesturestart', function(e){
- ...
- }).bind('gesturechange', function(e){
- ...
- }).bind('gestureend', function(e){
- ...
- })
- ;['pinch', 'pinchIn', 'pinchOut'].forEach(function(m){
- $.fn[m] = function(callback){ return this.bind(m, callback) }
- })
- }
- })(Zepto)
注意这里有个判断
,用来判断是否为
- $.os.ios
。这个判断需要引入设备侦测模块
- ios
。这个模块利用
- Detect
来进行设备侦测,里面是一大堆正则表达式,所以这个模块后面是不打算分析的了。
- userAgent
然后是监测
、
- gesturestart
、
- gesturechange
事件,根据这三个事件,可以组合出
- gestureend
、
- pinch
和
- pinchIn
事件。其实就是缩小和放大的手势操作。
- pinchOut
其中变量
对象和
- gesture
模块中的
- Touch
对象的作用差不多,可以先看看 《读Zepto源码之Touch模块》对
- touch
模块的分析。
- Touch
- function parentIfText(node) {
- return 'tagName' in node ? node: node.parentNode
- }
这个辅助方法是获取目标节点,如果节点不是元素节点,则用父节点作为目标节点。如果事件在文本节点或者伪类元素上触发时,会出现不是元素节点的情况。
- bind('gesturestart', function(e){
- var now = Date.now(), delta = now - (gesture.last || now)
- gesture.target = parentIfText(e.target)
- gestureTimeout && clearTimeout(gestureTimeout)
- gesture.e1 = e.scale
- gesture.last = now
- })
如
模块一样,在
- Touch
时,也用
- gesturestart
来记录两次
- delta
之间的时间间隔,用
- start
来保存目标元素,
- gesture.target
是起点时的缩放值。
- e1
- bind('gesturechange', function(e){
- gesture.e2 = e.scale
- })
在
时,更新终点
- gesturechange
的缩放值。
- guesture.e2
- if (gesture.e2 > 0) {
- Math.abs(gesture.e1 - gesture.e2) != 0 && $(gesture.target).trigger('pinch') &&
- $(gesture.target).trigger('pinch' + (gesture.e1 - gesture.e2 > 0 ? 'In' : 'Out'))
- gesture.e1 = gesture.e2 = gesture.last = 0
- } else if ('last' in gesture) {
- gesture = {}
- }
如果
存在(不可能有小于
- gesture.e2
的情况吧?),在起点的缩放值和终点的缩放值不相同的情况下,触发
- 0
事件;如果起点的缩放值比终点的缩放值大,则继续触发
- pinch
事件,则缩小效果;如果起点的缩放值比终点的缩放值小,则继续触发
- pinchIn
事件,即放大效果。
- pinchOut
最终将
、
- e1
和
- e2
都设置为
- last
。
- 0
在
不存在的情况下(在调用
- last
时),将
- preventDefault
清空。
- gesture
来源: http://www.cnblogs.com/hefty/p/7590184.html