Gesture
모듈은 IOS
의 Gesture
이벤트 캡슐화를 기반으로 하며 scale
속성을 사용하여 캡슐화합니다. pinch
일련의 이벤트. Gesture
模块基于 IOS
上的 Gesture
事件的封装,利用 scale
属性,封装出 pinch
系列事件。
本文阅读的源码为 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
模块中的 touch
对象的作用差不多,可以先看看 《读Zepto源码之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
ios
인지 확인하려면 $.os.ios
확인이 있습니다. 이 판단에는 장치 감지 모듈 Detect
의 도입이 필요합니다. 이 모듈은 많은 정규식이 포함된 장치 감지를 위해 userAgent
를 사용하므로 이 모듈은 나중에 분석되지 않습니다. 🎜🎜그런 다음 gesturestart
, gesturechange
, gestureend
이벤트를 모니터링하고 이 세 가지 이벤트를 기반으로 pinch
를 결합할 수 있습니다. , pinchIn
및 pinchOut
이벤트. 실제로는 확대, 축소하는 제스처 동작이다. 🎜🎜변수 gesture
개체는 Touch
모듈의 touch
개체와 유사한 기능을 가지고 있습니다. 먼저 "Touch Module for"를 살펴보세요. Zepto 소스 코드 읽기' Touch
모듈 분석. 🎜Touch
모듈과 마찬가지로 delta
는 gesturestart
에도 사용됩니다. > code> 두 start
사이의 시간 간격을 기록하려면 gesture.target
을 사용하여 대상 요소를 저장하세요. e1
은 출발점 . 🎜gesturechange
에서 엔드포인트 guesture.e2
의 배율 값을 업데이트하세요. 🎜gesture.e2
가 존재한다면(0
보다 작을 수는 없겠죠?) 시작점의 스케일링 값과 종료 지점 확대/축소 값이 다른 경우 pinch
이벤트가 트리거되고, 시작 지점의 확대/축소 값이 종료 지점의 확대/축소 값보다 크면 pinchIn 이벤트는 계속 트리거되고 확대/축소 효과가 달성됩니다. 시작점이 종료점의 확대/축소 값보다 크면 확대/축소가 발생하면 <code>pinchIn
이벤트가 실행됩니다. 값이 끝점의 확대/축소 값보다 작으면 pinchOut
이벤트가 계속 발생합니다. 즉, 확대/축소 효과가 발생합니다. 🎜🎜마지막으로 e1
, e2
및 last
는 모두 0
으로 설정됩니다. 🎜🎜 last
가 존재하지 않는 경우 gesture
를 비우세요(preventDefault
가 호출되는 경우). 🎜위 내용은 Zepto 소스 코드의 제스처 모듈 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!