Permalink
Browse files

implements cancelTouch() on 'tap' event, allowing simple button actio…

…ns to respond very quickly, without the 250ms delay of singleTap, while also allowing scrolling so long lists or buttons won't break page navigation.
  • Loading branch information...
1 parent 0863361 commit 80392e9a50a027b09c243606f25d247e6f6c345f @hunterloftis hunterloftis committed with Apr 29, 2012
Showing with 44 additions and 32 deletions.
  1. +4 −2 src/touch.js
  2. +40 −30 test/touch_functional.html
View
6 src/touch.js
@@ -34,7 +34,7 @@
if (tapTimeout) clearTimeout(tapTimeout)
if (swipeTimeout) clearTimeout(swipeTimeout)
if (longTapTimeout) clearTimeout(longTapTimeout)
- longTapTimeout = touchTimeout = null
+ touchTimeout = tapTimeout = swipeTimeout = longTapTimeout = null
touch = {}
}
@@ -75,7 +75,9 @@
// normal tap
} else if ('last' in touch) {
tapTimeout = setTimeout(function() {
- touch.el.trigger('tap')
+ var event = $.Event('tap');
+ event.cancelTouch = cancelAll;
+ touch.el.trigger(event)
}, 0);
touchTimeout = setTimeout(function(){
View
70 test/touch_functional.html
@@ -20,43 +20,52 @@
touch events test (scrollable cancel)
</div>
+ <div id='touch_test_single' style="width: 200px; height: 200px; background: #ecc; -webkit-user-select: none">
+ touch events test (scrollable cancel, single tap only)
+ </div>
+
<div id="browser"> </div>
<script>
$('#browser').text(navigator.userAgent)
+ /**
+ * #touch_test
+ * Container that captures all touch events.
+ *
+ * Prevents default on touchmove, disabling scrolling.
+ * Captures swipes in all directions.
+ * Captures tap, singleTap (after delay), doubleTap, longTap
+ */
$('#touch_test').bind('touchmove', function(e) { e.preventDefault() })
- $('#touch_test')
- .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!')
- })
+ listen_to('#touch_test')
+
+ /**
+ * #touch_test_scrollable
+ * Container that allows scrolling while capturing all events except swipes in the direction of scroll
+ *
+ * Captures swipes in non-scrolling directions
+ * Captures tap, singleTap (after delay), doubleTap, longTap
+ */
+ listen_to('#touch_test_scrollable')
+
+ /**
+ * #touch_test_single
+ * Container that allows scrolling and captures only simple, single taps
+ * eg: a button or a tappable list item
+ *
+ * Cancels touch after tap, disabling other touch events (singleTap, doubleTap)
+ * Captures tap
+ */
+ $('#touch_test_single').bind('tap', function(e) {
+ e.cancelTouch();
+ })
+ listen_to('#touch_test_single');
+
+
- $('#touch_test_scrollable')
- .tap(function(){
+ function listen_to(el) {
+ $(el).tap(function(){
$(this).append(' | tap!')
})
.doubleTap(function(){
@@ -83,6 +92,7 @@
.singleTap(function(){
$(this).append(' | single tap!')
})
+ }
</script>
</body>
</html>

0 comments on commit 80392e9

Please sign in to comment.