fix(tap): Prevent clicks from firing after scrolling, #579

2026-03-13 10:22:08 +08:00 · 2014-04-04 12:28:40 -05:00
parent 82b04ea8d0
commit cb602b587b
4 changed files with 241 additions and 50 deletions
--- a/js/ext/angular/test/scroll2.html
+++ b/js/ext/angular/test/scroll2.html
@@ -0,0 +1,197 @@
+<html ng-app="navTest">
+  <head>
+    <meta charset="utf-8">
+    <title>Scroll Click Tests</title>
+    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
+    <!--<link rel="stylesheet" href="../../../../dist/css/ionic.css">-->
+    <script src="../../../../dist/js/ionic.bundle.js"></script>
+    <style>
+      #click-notify {
+        position: absolute;
+        top: 0;
+        left: 0;
+        z-index: 9997;
+        display: none;
+        padding: 8px;
+        background: red;
+        color: white;
+      }
+      #mousemove-notify {
+        position: absolute;
+        top: 40px;
+        left: 0;
+        z-index: 9998;
+        display: none;
+        padding: 8px;
+        background: orange;
+      }
+      #touchmove-notify {
+        position: absolute;
+        top: 80px;
+        left: 0;
+        z-index: 9999;
+        display: none;
+        padding: 8px;
+        background: yellow;
+      }
+      #touchcancel-notify {
+        position: absolute;
+        top: 120px;
+        left: 0;
+        z-index: 9999;
+        display: none;
+        padding: 8px;
+        background: purple;
+        color: white;
+      }
+      a {
+        display: block;
+        background: blue;
+        margin: 40px 80px;
+        padding: 40px;
+        -webkit-tap-highlight-color: transparent;
+        text-decoration: none;
+      }
+      .activated {
+        background: yellow;
+      }
+    </style>
+  </head>
+  <body>
+
+    <div id="click-notify">CLICK!</div>
+    <div id="mousemove-notify">Mouse Move!</div>
+    <div id="touchmove-notify">Touch Move!</div>
+    <div id="touchcancel-notify">Touch Cancel!</div>
+
+    <ion-view title="Home" hide-nav-bar="true">
+
+      <ion-content class="" scroll="false">
+
+        <a href='#' id="link">&nbsp;</a>
+
+        <div id="logs"></div>
+
+      </ion-content>
+
+    </ion-view>
+
+    <script>
+      angular.module('navTest', ['ionic']);
+
+      var mouseTimerId;
+      var mouseMoveCount = 0;
+      function onMouseMove(e) {
+        clearTimeout(mouseTimerId);
+        mouseTimerId = setTimeout(function(){
+          var el = document.getElementById('mousemove-notify');
+          el.style.display = 'block';
+          mouseMoveCount++;
+          el.innerText = 'Mouse Move! ' + mouseMoveCount;
+          clearTimeout(mouseTimerId);
+          mouseTimerId = setTimeout(function(){
+            el.style.display = 'none';
+          }, 1000);
+        }, 0);
+      }
+
+      var touchTimerId;
+      var touchMoveCount = 0;
+      function onTouchMove(e) {
+        clearTimeout(touchTimerId);
+        touchTimerId = setTimeout(function(){
+          var el = document.getElementById('touchmove-notify');
+          el.style.display = 'block';
+          touchMoveCount++;
+          el.innerText = 'Touch Move! ' + touchMoveCount;
+          clearTimeout(touchTimerId);
+          touchTimerId = setTimeout(function(){
+            el.style.display = 'none';
+          }, 1000);
+        }, 0);
+      }
+
+      var touchCancelTimerId;
+      var touchCancelMoveCount = 0;
+      function onTouchCancel(e) {
+        clearTimeout(touchCancelTimerId);
+        touchCancelTimerId = setTimeout(function(){
+          var el = document.getElementById('touchcancel-notify');
+          el.style.display = 'block';
+          touchCancelMoveCount++;
+          el.innerText = 'Touch Cancel! ' + touchCancelMoveCount;
+          clearTimeout(touchCancelTimerId);
+          touchCancelTimerId = setTimeout(function(){
+            el.style.display = 'none';
+          }, 1000);
+        }, 0);
+      }
+
+      document.getElementById('link').addEventListener('click', onClick, false);
+
+      function onClick(e) {
+        var el = document.getElementById('click-notify');
+        el.style.display = 'block';
+        el.innerText = 'Click!';
+
+        setTimeout(function(){
+          document.getElementById('click-notify').style.display = 'none';
+        }, 300);
+      }
+
+      document.addEventListener('touchmove', onTouchMove, false);
+      document.addEventListener('touchcancel', onTouchCancel, false);
+      document.addEventListener('mousemove', onMouseMove, false);
+
+
+      var index = 0;
+      var timeId;
+      var msgs = [];
+
+      console.debug = function() {
+        index++;
+        var msg = [];
+        msg.push(index);
+        for (var i = 0, j = arguments.length; i < j; i++){
+          msg.push(arguments[i]);
+        }
+        msg.push(getTime());
+
+        msg = msg.join(', ');
+
+        if(arguments[0] === 'ERROR!') msg = '<span style="color:red;font-weight:bold">' + msg + '</span>';
+
+        if(arguments[0] === 'touchstart') msg = '<span style="color:blue">' + msg + '</span>';
+        if(arguments[0] === 'touchend') msg = '<span style="color:darkblue">' + msg + '</span>';
+
+        if(arguments[0] === 'mousedown') msg = '<span style="color:red">' + msg + '</span>';
+        if(arguments[0] === 'mouseup') msg = '<span style="color:maroon">' + msg + '</span>';
+
+        if(arguments[0] === 'click') msg = '<span style="color:purple">' + msg + '</span>';
+
+        if(arguments[1] === 'click') msg = '<span style="color:green;font-weight:bold">' + msg + '</span>';
+        if(arguments[1] === 'change') msg = '<span style="color:orange;font-weight:bold">' + msg + '</span>';
+
+        msgs.unshift( msg );
+
+        if(msgs.length > 30) {
+          msgs.splice(30);
+        }
+
+        // do this so we try not to interfere with the device performance
+        clearTimeout(timeId);
+        timeId = setTimeout(function(){
+          document.getElementById('logs').innerHTML = msgs.join('<br>');
+        }, 150);
+
+      };
+
+      function getTime() {
+        var d = new Date();
+        return d.getSeconds() + '.' + d.getMilliseconds();
+      }
+
+    </script>
+  </body>
+</html>
+
--- a/js/ext/angular/test/service/ionicTap.unit.js
+++ b/js/ext/angular/test/service/ionicTap.unit.js
@@ -5,30 +5,13 @@ describe('Ionic Tap', function() {
    ionic.tap.reset();
  });

-  it('Should not focus on an input if it has scrolled', function() {
-    var targetEle = {
-      dispatchEvent: function() {},
-      focus: function() { this.isFocused = true; }
-    };
-
-    ionic.tap.setStart({clientX: 100, clientY: 100});
-
-    targetEle.tagName = 'INPUT';
-    var e = {
-      clientX: 100, clientY: 200,
-      preventDefault: function() {}
-    };
-    ionic.tap.simulateClick(targetEle, e);
-    expect(targetEle.isFocused).toBeUndefined();
-  });
-
  it('Should focus on an input if it hasnt scrolled', function() {
    var targetEle = {
      dispatchEvent: function() {},
      focus: function() { this.isFocused = true; }
    };

-    ionic.tap.setStart({clientX: 100, clientY: 100});
+    ionic.tap.setTouchStart({clientX: 100, clientY: 100});

    targetEle.tagName = 'INPUT';
    var e = {
@@ -46,7 +29,7 @@ describe('Ionic Tap', function() {
      focus: function() {}
    };

-    ionic.tap.setStart({ clientX: 100, clientY: 100 });
+    ionic.tap.setTouchStart({ clientX: 100, clientY: 100 });
    var e = {
      clientX: 100, clientY: 100,
      preventDefault: function() { this.preventedDefault = true }
@@ -68,46 +51,46 @@ describe('Ionic Tap', function() {
    e.preventedDefault = false;
  });

-  it('Should setStart and hasScrolled true if >= touch tolerance', function() {
-    ionic.tap.setStart({ clientX: 100, clientY: 100 });
+  it('Should setTouchStart and hasTouchScrolled true if >= touch tolerance', function() {
+    ionic.tap.setTouchStart({ clientX: 100, clientY: 100 });

-    var s = ionic.tap.hasScrolled({ clientX: 111, clientY: 100 });
+    var s = ionic.tap.hasTouchScrolled({ clientX: 111, clientY: 100 });
    expect(s).toEqual(true);

-    s = ionic.tap.hasScrolled({ clientX: 89, clientY: 100 });
+    s = ionic.tap.hasTouchScrolled({ clientX: 89, clientY: 100 });
    expect(s).toEqual(true);

-    s = ionic.tap.hasScrolled({ clientX: 100, clientY: 107 });
+    s = ionic.tap.hasTouchScrolled({ clientX: 100, clientY: 107 });
    expect(s).toEqual(true);

-    s = ionic.tap.hasScrolled({ clientX: 100, clientY: 93 });
+    s = ionic.tap.hasTouchScrolled({ clientX: 100, clientY: 93 });
    expect(s).toEqual(true);

-    s = ionic.tap.hasScrolled({ clientX: 100, clientY: 200 });
+    s = ionic.tap.hasTouchScrolled({ clientX: 100, clientY: 200 });
    expect(s).toEqual(true);
  });

-  it('Should setStart and hasScrolled false if less than touch tolerance', function() {
-    ionic.tap.setStart({ clientX: 100, clientY: 100 });
+  it('Should setTouchStart and hasTouchScrolled false if less than touch tolerance', function() {
+    ionic.tap.setTouchStart({ clientX: 100, clientY: 100 });

-    var s = ionic.tap.hasScrolled({ clientX: 100, clientY: 100 });
+    var s = ionic.tap.hasTouchScrolled({ clientX: 100, clientY: 100 });
    expect(s).toEqual(false);

-    s = ionic.tap.hasScrolled({ clientX: 104, clientY: 100 });
+    s = ionic.tap.hasTouchScrolled({ clientX: 104, clientY: 100 });
    expect(s).toEqual(false);

-    s = ionic.tap.hasScrolled({ clientX: 96, clientY: 100 });
+    s = ionic.tap.hasTouchScrolled({ clientX: 96, clientY: 100 });
    expect(s).toEqual(false);

-    s = ionic.tap.hasScrolled({ clientX: 100, clientY: 102 });
+    s = ionic.tap.hasTouchScrolled({ clientX: 100, clientY: 102 });
    expect(s).toEqual(false);

-    s = ionic.tap.hasScrolled({ clientX: 100, clientY: 98 });
+    s = ionic.tap.hasTouchScrolled({ clientX: 100, clientY: 98 });
    expect(s).toEqual(false);
  });

-  it('Should not be hasScrolled if 0 coordinates', function() {
-    var s = ionic.tap.hasScrolled({ clientX: 0, clientY: 0 });
+  it('Should not be hasTouchScrolled if 0 coordinates', function() {
+    var s = ionic.tap.hasTouchScrolled({ clientX: 0, clientY: 0 });
    expect(s).toEqual(false);
  });

--- a/js/utils/activator.js
+++ b/js/utils/activator.js
@@ -44,8 +44,8 @@
            document.body.removeEventListener('mousedown', ionic.activator.start);
            touchMoveClearTimer = setTimeout(function(){
              document.body.addEventListener('touchmove', onTouchMove, false);
-            }, 85);
-            setTimeout(activateElements, 85);
+            }, 80);
+            setTimeout(activateElements, 80);
          } else {
            document.body.addEventListener('mousemove', clear, false);
            ionic.requestAnimationFrame(activateElements);
@@ -79,7 +79,7 @@
  }

  function onTouchMove(e) {
-    if( ionic.tap.hasScrolled(e) ) {
+    if( ionic.tap.hasTouchScrolled(e) ) {
      clear();
    }
  }
--- a/js/utils/tap.js
+++ b/js/utils/tap.js
@@ -10,6 +10,7 @@
  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 a touch
  var clickPreventTimerId;
+  var _hasTouchScrolled = false; // if the touchmove already exceeded the touchmove tolerance


  ionic.tap = {
@@ -21,10 +22,10 @@
      var e = orgEvent.gesture.srcEvent; // evaluate the actual source event, not the created event by gestures.js
      var ele = e.target; // get the target element that was actually tapped

-      if( ionic.tap.isRecentTap(e) || e.type === 'touchcancel' ) {
+      if( ionic.tap.isRecentTap(e) || ionic.tap.hasTouchScrolled(e) || e.type === 'touchcancel') {
        // if a tap in the same area just happened,
        // or it was a touchcanel event, don't continue
-        console.debug('tapInspect', 'isRecentTap', ele.tagName, 'type:', e.type);
+        console.debug('tapInspect stopEvent', e.type, ele.tagName);
        return stopEvent(e);
      }

@@ -60,7 +61,7 @@
        return;
      }

-      console.debug('simulateClick', ele.tagName, ele.className);
+      console.debug('simulateClick', e.type, ele.tagName, ele.className);

      var c = ionic.tap.getCoordinates(e);

@@ -73,9 +74,7 @@
      ele.dispatchEvent(clickEvent);

      if(ele.tagName === 'INPUT' || ele.tagName === 'TEXTAREA') {
-        if(!ionic.tap.hasScrolled(e)) {
-          ele.focus();
-        }
+        ele.focus();
        e.preventDefault();
      } else {
        ionic.tap.blurActive();
@@ -108,9 +107,9 @@
          // a tap has already happened at these coordinates recently, ignore this event
          console.debug('preventGhostClick', 'isRecentTap', e.target.tagName);

-        } else if(ionic.tap.hasScrolled(e)) {
+        } else if(ionic.tap.hasTouchScrolled(e)) {
          // this click's coordinates are different than its touchstart/mousedown, must have been scrolling
-          console.debug('preventGhostClick', 'hasScrolled');
+          console.debug('preventGhostClick', 'hasTouchScrolled');
        }

        var c = ionic.tap.getCoordinates(e);
@@ -118,7 +117,7 @@
      })());


-      if(e.target.control || ionic.tap.isRecentTap(e) || ionic.tap.hasScrolled(e)) {
+      if(e.target.control || ionic.tap.isRecentTap(e) || ionic.tap.hasTouchScrolled(e)) {
        return stopEvent(e);
      }

@@ -144,7 +143,9 @@
      return { x:0, y:0 };
    },

-    hasScrolled: function(event) {
+    hasTouchScrolled: function(event) {
+      if(_hasTouchScrolled) return true;
+
      // check if this click's coordinates are different than its touchstart/mousedown
      var c = ionic.tap.getCoordinates(event);

@@ -218,8 +219,18 @@
      }
    },

-    setStart: function(e) {
+    setTouchStart: function(e) {
+      _hasTouchScrolled = false;
      startCoordinates = ionic.tap.getCoordinates(e);
+      document.body.addEventListener('touchmove', ionic.tap.onTouchMove, false);
+    },
+
+    onTouchMove: function(e) {
+      if( ionic.tap.hasTouchScrolled(e) ) {
+        _hasTouchScrolled = true;
+        document.body.removeEventListener('touchmove', ionic.tap.onTouchMove);
+        console.debug('hasTouchScrolled');
+      }
    },

    reset: function() {
@@ -254,6 +265,6 @@

  // remember where the user first started touching the screen
  // so that if they scrolled, it shouldn't fire the click
-  document.addEventListener('touchstart', ionic.tap.setStart, false);
+  document.addEventListener('touchstart', ionic.tap.setTouchStart, false);

 })(this, document, ionic);