fix(tap): Trigger clicks if touch/click held for more than 250ms, closes #791

js/ext/angular/src/directive/ionicTouch.js

@@ -31,14 +31,14 @@ angular.module('ionic.ui.touch', [])
         });
       });
 
-      ionic.on('tap', onTap, element[0]);
+      element[0].addEventListener('touchend', onTap, false);
 
       // Hack for iOS Safari's benefit. It goes searching for onclick handlers and is liable to click
       // something else nearby.
       element.onclick = function(event) { };
 
       scope.$on('$destroy', function () {
-        ionic.off('tap', onTap, element[0]);
+        element[0].removeEventListener('touchend', onTap);
       });
     };
   }])

js/utils/tap.js

@@ -135,10 +135,10 @@
       return false;
     }
 
-    return (c.x > startCoordinates.x + HIT_RADIUS ||
-            c.x < startCoordinates.x - HIT_RADIUS ||
-            c.y > startCoordinates.y + HIT_RADIUS ||
-            c.y < startCoordinates.y - HIT_RADIUS);
+    return (c.x > startCoordinates.x + 2 ||
+            c.x < startCoordinates.x - 2 ||
+            c.y > startCoordinates.y + 2 ||
+            c.y < startCoordinates.y - 2);
   }
 
   function recordCoordinates(event) {
@@ -174,14 +174,21 @@
     return { x:0, y:0 };
   }
 
+  var clickPreventTimerId;
   function removeClickPrevent(e) {
-    setTimeout(function(){
+    clearTimeout(clickPreventTimerId);
+    clickPreventTimerId = setTimeout(function(){
       var tap = isRecentTap(e);
       if(tap) delete tapCoordinates[tap.id];
       startCoordinates = {};
     }, REMOVE_PREVENT_DELAY);
   }
 
+  function touchEnd(e) {
+    tapPolyfill(e);
+    removeClickPrevent(e);
+  }
+
   function stopEvent(e){
     e.stopPropagation();
     e.preventDefault();
@@ -216,14 +223,13 @@
       REMOVE_PREVENT_DELAY = 800;
     }
 
+    // global action event listener for HTML elements that were tapped or held by the user
+    document.addEventListener('touchend', touchEnd, false);
+
     // set global click handler and check if the event should stop or not
     document.addEventListener('click', preventGhostClick, true);
 
-    // global tap event listener polyfill for HTML elements that were "tapped" by the user
-    ionic.on("tap", tapPolyfill, document);
-
-    // listeners used to remove ghostclick prevention
-    document.addEventListener('touchend', removeClickPrevent, false);
+    // listener used to remove ghostclick prevention
     document.addEventListener('mouseup', removeClickPrevent, false);
 
     // in the case the user touched the screen, then scrolled, it shouldn't fire the click