enables locking an element to no-scroll (preventdefault on touchmove)…

… or allowing scroll after touch (eg for buttons), scrolling after touch cancels all tap events.
hunterloftis · Apr 29, 2012 · ae60cc3 · ae60cc3
1 parent a642571
commit ae60cc3
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 11 deletions.
diff --git a/src/touch.js b/src/touch.js
@@ -3,7 +3,8 @@
 //     Zepto.js may be freely distributed under the MIT license.
 
 ;(function($){
-  var touch = {}, touchTimeout
+  var touch = {}, touchTimeout, tapTimeout
+  var longTapDelay = 750, longTapTimeout
 
   function parentIfText(node){
     return 'tagName' in node ? node : node.parentNode
@@ -14,8 +15,6 @@
     return xDelta >= yDelta ? (x1 - x2 > 0 ? 'Left' : 'Right') : (y1 - y2 > 0 ? 'Up' : 'Down')
   }
 
-  var longTapDelay = 750, longTapTimeout
-
   function longTap(){
     longTapTimeout = null
     if (touch.last) {
@@ -29,6 +28,14 @@
     longTapTimeout = null
   }
 
+  function cancelAll() {
+    if (touchTimeout) clearTimeout(touchTimeout)
+    if (tapTimeout) clearTimeout(tapTimeout)
+    if (longTapTimeout) clearTimeout(longTapTimeout)
+    longTapTimeout = touchTimeout = null
+    touch = {}
+  }
+
   $(document).ready(function(){
     var now, delta
 
@@ -63,20 +70,19 @@
 
       // normal tap
       } else if ('last' in touch) {
-        touch.el.trigger('tap')
+        tapTimeout = setTimeout(function() {
+          touch.el.trigger('tap')
+        }, 0);
 
         touchTimeout = setTimeout(function(){
           touchTimeout = null
           touch.el.trigger('singleTap')
           touch = {}
         }, 250)
       }
-    }).bind('touchcancel', function(){
-      if (touchTimeout) clearTimeout(touchTimeout)
-      if (longTapTimeout) clearTimeout(longTapTimeout)
-      longTapTimeout = touchTimeout = null
-      touch = {}
-    })
+    }).bind('touchcancel', cancelAll)
+
+    $(window).bind('scroll', cancelAll)
   })
 
   ;['swipe', 'swipeLeft', 'swipeRight', 'swipeUp', 'swipeDown', 'doubleTap', 'tap', 'singleTap', 'longTap'].forEach(function(m){

diff --git a/test/touch_functional.html b/test/touch_functional.html
@@ -12,10 +12,14 @@
 <body>
   <h1>Zepto touch functional test</h1>
 
-  <div id="touch_test" style="width: 200px; height: 200px; background: #ddd; -webkit-user-select: none">
+  <div id="touch_test" style="width: 200px; height: 200px; background: #cce; -webkit-user-select: none">
     touch events test
   </div>
 
+  <div id='touch_test_scrollable' style="width: 200px; height: 200px; background: #cec; -webkit-user-select: none">
+    touch events test (scrollable cancel)
+  </div>
+
   <div id="browser"> </div>
 
   <script>
@@ -50,6 +54,35 @@ <h1>Zepto touch functional test</h1>
       .singleTap(function(){
         $(this).append(' | single tap!')
       })
+
+    $('#touch_test_scrollable')
+      .tap(function(){
+        $(this).append(' | tap!')
+      })
+      .doubleTap(function(){
+        $(this).append(' | double tap!')
+      })
+      .swipe(function(){
+        $(this).append(' | swipe!')
+      })
+      .swipeLeft(function(){
+        $(this).append(' | swipe left!')
+      })
+      .swipeRight(function(){
+        $(this).append(' | swipe right!')
+      })
+      .swipeUp(function(){
+        $(this).append(' | swipe up!')
+      })
+      .swipeDown(function(){
+        $(this).append(' | swipe down!')
+      })
+      .longTap(function(){
+        $(this).append(' | long tap!')
+      })
+      .singleTap(function(){
+        $(this).append(' | single tap!')
+      })
   </script>
 </body>
 </html>