Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

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.
  • Loading branch information...
commit ae60cc36cdd061cf132bce08a550fa189d5f9cb5 1 parent a642571
@hunterloftis authored
Showing with 50 additions and 11 deletions.
  1. +16 −10 src/touch.js
  2. +34 −1 test/touch_functional.html
View
26 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,7 +70,9 @@
// normal tap
} else if ('last' in touch) {
- touch.el.trigger('tap')
+ tapTimeout = setTimeout(function() {
+ touch.el.trigger('tap')
+ }, 0);
touchTimeout = setTimeout(function(){
touchTimeout = null
@@ -71,12 +80,9 @@
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){
View
35 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 @@
.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>
Please sign in to comment.
Something went wrong with that request. Please try again.