fix(tap): Prevent "clicking" when scrolling

Adam Bradley · Adam Bradley · commit f3bd258c9ee3 · 2014-04-01T10:34:36.000-05:00
diff --git a/js/ext/angular/test/list.html b/js/ext/angular/test/list.html
@@ -8,20 +8,42 @@
     <style>
       #click-notify {
         position: absolute;
+        top: 100px;
+        left: 40%;
+        z-index: 9997;
         display: none;
-        top: 150px;
-        left: 48%;
-        z-index: 9999;
+        padding: 8px;
         background: red;
+        color: white;
+      }
+      #mousemove-notify {
+        position: absolute;
+        top: 140px;
+        left: 40%;
+        z-index: 9998;
+        display: none;
+        padding: 8px;
+        background: orange;
+      }
+      #touchmove-notify {
+        position: absolute;
+        top: 180px;
+        left: 40%;
+        z-index: 9999;
+        display: none;
+        padding: 8px;
+        background: yellow;
       }
     </style>
   </head>
   <body ng-controller="TestCtrl">
     <div id="click-notify">CLICK!</div>
-    <ion-side-menus>
+    <div id="mousemove-notify">Mouse Move!</div>
+    <div id="touchmove-notify">Touch Move!</div>
+    <!-- <ion-side-menus>
 
       <ion-side-menu-content>
-
+ -->
         <ion-header-bar class="bar-positive">
           <div class="buttons">
             <button ng-click="toggleDelete()" class="button button-clear">{{ editBtnText }}</button>
@@ -35,7 +57,8 @@ <h1 class="title">List Tests</h1>
 
         <ion-content class="has-header">
 
-          <ion-list show-delete="isDeletingItems"
+          <ion-list
+                show-delete="isDeletingItems"
                 show-reorder="isReorderingItems"
                 on-refresh-holding="refreshHolding()"
                 on-refresh-opening="refreshOpening(ratio)"
@@ -52,7 +75,7 @@ <h1 class="title">List Tests</h1>
                 option-buttons="optionButtons1">
 
             <!-- shows that the item directive does not need attributes and can get values from the list attributes -->
-            <ion-item item="item" ng-href="#" ng-click="itemClick()" class="item-thumbnail-left" ng-repeat="item in items" ng-class="{ active: item.isActive}">
+            <ion-item item="item" ng-href="#" ng-click="itemClick(item)" class="item-thumbnail-left" ng-repeat="item in items" ng-class="{ active: item.isActive}">
               <img ng-src="{{item.face}}">
               <h2>{{item.from}}</h2>
               <p>{{item.text}}</p>
@@ -122,13 +145,13 @@ <h1>YELLOW {{slideBox.slideIndex}}</h1>
           </ion-list>
 
         </ion-content>
-
+<!--
       </ion-side-menu-content>
 
       <ion-side-menu side="left">
         Left menu!
       </ion-side-menu>
-    </ion-side-menus>
+    </ion-side-menus> -->
 
     <script>
       angular.module('navTest', ['ionic'])
@@ -141,14 +164,38 @@ <h1>YELLOW {{slideBox.slideIndex}}</h1>
 
         // Build Mock Data
         $scope.items = [
-          { from: 'Ben', face: 'https://pbs.twimg.com/profile_images/378800000571933189/278e8e1b7871a115b95fc550cd07af40.png', text: 'Whoa, whoa, whoa. There’s still plenty of meat on that bone. Now you take this home, throw it in a pot, add some broth, a potato. Baby, you\'ve got a stew going.' },
-          { from: 'Adam', face: 'https://pbs.twimg.com/profile_images/2927292174/25b170ee2e3044fd936ad1319bc4b82d_bigger.jpeg', text: 'It Ain\'t Easy Being Cheesy' },
-          { from: 'Tim', face: 'https://pbs.twimg.com/profile_images/378800000290028838/ee3303b02223f25cb0f9b082b55b2eeb.jpeg', text: 'Baxter! You know I don\'t speak spanish!' },
-          { from: 'Brody', face: 'https://pbs.twimg.com/profile_images/378800000138067018/554c103ebf37c2ba3b923b8deea46b0d.jpeg', text: 'Sounds like some sort of marmalade' },
-          { from: 'Peter', face: 'https://pbs.twimg.com/profile_images/378800000238071493/08f76337bdc91b1e1e73a9d55c57a451.jpeg', text: 'A cooked goose for everyone!' },
-          { from: 'Max', face: 'https://pbs.twimg.com/profile_images/430001754747305984/qa5DFLgU.jpeg', text: 'Yes my dear man, more beans. oooohh' },
-          { from: 'Andy', face: 'https://pbs.twimg.com/profile_images/423294834229522433/BSlEOBYt.jpeg', text: 'I did it all for her' },
-          { from: 'Melissa', face: 'https://pbs.twimg.com/profile_images/412451928816111616/VZ3_md1N.jpeg', text: 'I think I want my money back' }
+          {
+            from: 'Ben',
+            face: 'https://pbs.twimg.com/profile_images/378800000571933189/278e8e1b7871a115b95fc550cd07af40.png',
+            text: 'Whoa, whoa, whoa. There’s still plenty of meat on that bone. Now you take this home, throw it in a pot, add some broth, a potato. Baby, you\'ve got a stew going.' },
+          {
+            from: 'Adam',
+            face: 'https://pbs.twimg.com/profile_images/2927292174/25b170ee2e3044fd936ad1319bc4b82d_bigger.jpeg',
+            text: 'It Ain\'t Easy Being Cheesy' },
+          {
+            from: 'Tim',
+            face: 'https://pbs.twimg.com/profile_images/378800000290028838/ee3303b02223f25cb0f9b082b55b2eeb.jpeg',
+            text: 'Baxter! You know I don\'t speak spanish!' },
+          {
+            from: 'Brody',
+            face: 'https://pbs.twimg.com/profile_images/378800000138067018/554c103ebf37c2ba3b923b8deea46b0d.jpeg',
+            text: 'Sounds like some sort of marmalade' },
+          {
+            from: 'Peter',
+            face: 'https://pbs.twimg.com/profile_images/378800000238071493/08f76337bdc91b1e1e73a9d55c57a451.jpeg',
+            text: 'A cooked goose for everyone!' },
+          {
+            from: 'Max',
+            face: 'https://pbs.twimg.com/profile_images/430001754747305984/qa5DFLgU.jpeg',
+            text: 'Yes my dear man, more beans. oooohh' },
+          {
+            from: 'Andy',
+            face: 'https://pbs.twimg.com/profile_images/423294834229522433/BSlEOBYt.jpeg',
+            text: 'I did it all for her' },
+          {
+            from: 'Melissa',
+            face: 'https://pbs.twimg.com/profile_images/412451928816111616/VZ3_md1N.jpeg',
+            text: 'I think I want my money back' }
         ];
 
 
@@ -167,12 +214,14 @@ <h1>YELLOW {{slideBox.slideIndex}}</h1>
         };
 
 
-        $scope.itemClick = function() {
-          console.info('itemClick');
-          document.getElementById('click-notify').style.display = 'block';
+        $scope.itemClick = function(item) {
+          var el = document.getElementById('click-notify');
+          el.style.display = 'block';
+          el.innerText = 'Click! ' + item.from;
+
           setTimeout(function(){
             document.getElementById('click-notify').style.display = 'none';
-          }, 500);
+          }, 300);
         };
 
         // Item Methods/Properties
@@ -216,6 +265,35 @@ <h1>YELLOW {{slideBox.slideIndex}}</h1>
         ];
 
       });
+
+      var mouseTimerId;
+      function onMouseMove(e) {
+        clearTimeout(mouseTimerId);
+        mouseTimerId = setTimeout(function(){
+          var el = document.getElementById('mousemove-notify');
+          el.style.display = 'block';
+          clearTimeout(mouseTimerId);
+          mouseTimerId = setTimeout(function(){
+            el.style.display = 'none';
+          }, 1000);
+        }, 0);
+      }
+
+      var touchTimerId;
+      function onTouchMove(e) {
+        clearTimeout(touchTimerId);
+        touchTimerId = setTimeout(function(){
+          var el = document.getElementById('touchmove-notify');
+          el.style.display = 'block';
+          clearTimeout(touchTimerId);
+          touchTimerId = setTimeout(function(){
+            el.style.display = 'none';
+          }, 1000);
+        }, 0);
+      }
+
+      document.addEventListener('touchmove', onTouchMove, false);
+      document.addEventListener('mousemove', onMouseMove, false);
     </script>
   </body>
 </html>
diff --git a/js/utils/tap.js b/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 + TOUCH_TOLERANCE_X ||
+            c.x < startCoordinates.x - TOUCH_TOLERANCE_X ||
+            c.y > startCoordinates.y + TOUCH_TOLERANCE_Y ||
+            c.y < startCoordinates.y - TOUCH_TOLERANCE_Y);
   }
 
   function recordCoordinates(event) {
@@ -180,7 +180,6 @@
     clickPreventTimerId = setTimeout(function(){
       var tap = isRecentTap(e);
       if(tap) delete tapCoordinates[tap.id];
-      startCoordinates = {};
     }, REMOVE_PREVENT_DELAY);
   }
 
@@ -206,10 +205,12 @@
   }
 
   var tapCoordinates = {}; // used to remember coordinates to ignore if they happen again quickly
-  var startCoordinates = {}; // used to remember where the coordinates of the start of the tap
+  var startCoordinates = {}; // used to remember where the coordinates of the start of a touch
   var CLICK_PREVENT_DURATION = 1500; // max milliseconds ghostclicks in the same area should be prevented
   var REMOVE_PREVENT_DELAY = 380; // delay after a touchend/mouseup before removing the ghostclick prevent
-  var HIT_RADIUS = 15;
+  var HIT_RADIUS = 15; // surrounding area of a click that if a ghostclick happens it would get ignored
+  var TOUCH_TOLERANCE_X = 4; // how much the X coordinates can be off between start/end, but still a click
+  var TOUCH_TOLERANCE_Y = 2; // how much the Y coordinates can be off between start/end, but still a click
 
   ionic.Platform.ready(function(){
 
@@ -230,7 +231,6 @@
 
     // in the case the user touched the screen, then scrolled, it shouldn't fire the click
     document.addEventListener('touchstart', recordStartCoordinates, false);
-    document.addEventListener('mousedown', recordStartCoordinates, false);
   });
 
 })(this, document, ionic);
