Merge pull request #3407 from Polymer/fix-nested-track-tap

Disable tap gesture when track gesture is firing for ancestor node

Author: kevinpschaaf

src/standard/gestures.html

@@ -230,7 +230,8 @@
               Gestures.handleTouchAction(ev);
             }
           }
-          if (type === 'touchend') {
+          // disable synth mouse events, unless this event is itself simulated
+          if (type === 'touchend' && !ev.__polymerSimulatedTouch) {
             POINTERSTATE.mouse.target = Polymer.dom(ev).rootTarget;
             // ignore syntethic mouse events after a touch
             ignoreMouse(true);
@@ -247,10 +248,8 @@
       for (var i = 0, r; i < recognizers.length; i++) {
         r = recognizers[i];
         if (gs[r.name] && !handled[r.name]) {
-          if (r.flow && r.flow.start.indexOf(ev.type) > -1) {
-            if (r.reset) {
-              r.reset();
-            }
+          if (r.flow && r.flow.start.indexOf(ev.type) > -1 && r.reset) {
+            r.reset();
           }
         }
       }
@@ -525,6 +524,10 @@
         if (self.hasMovedEnough(x, y)) {
           // first move is 'start', subsequent moves are 'move', mouseup is 'end'
           self.info.state = self.info.started ? (e.type === 'mouseup' ? 'end' : 'track') : 'start';
+          if (self.info.state === 'start') {
+            // iff tracking, always prevent tap
+            Gestures.prevent('tap');
+          }
           self.info.addMove({x: x, y: y});
           if (!hasLeftMouseButton(e)) {
             // always fire "end"
@@ -537,7 +540,6 @@
       };
       var upfn = function upfn(e) {
         if (self.info.started) {
-          Gestures.prevent('tap');
           movefn(e);
         }
 
@@ -561,6 +563,10 @@
       var ct = e.changedTouches[0];
       var x = ct.clientX, y = ct.clientY;
       if (this.hasMovedEnough(x, y)) {
+        if (this.info.state === 'start') {
+          // iff tracking, always prevent tap
+          Gestures.prevent('tap');
+        }
         this.info.addMove({x: x, y: y});
         this.fire(t, ct);
         this.info.state = 'track';
@@ -573,8 +579,6 @@
       var ct = e.changedTouches[0];
       // only trackend if track was started and not aborted
       if (this.info.started) {
-        // iff tracking, always prevent tap
-        Gestures.prevent('tap');
         // reset started state on up
         this.info.state = 'end';
         this.info.addMove({x: ct.clientX, y: ct.clientY});

test/unit/gestures-elements.html

@@ -94,6 +94,22 @@
   </script>
 </dom-module>
 
+<script>
+var EventCaptureBehavior = {
+  properties: {
+    stream: {
+      type: Array,
+      value: function() {
+        return [];
+      }
+    }
+  },
+  handle: function(e) {
+    this.stream.push(e);
+  }
+};
+</script>
+
 <dom-module id="x-prevent">
   <script>
     Polymer({
@@ -103,13 +119,8 @@
         'tap': 'handle',
         'track': 'handle'
       },
+      behaviors: [EventCaptureBehavior],
       is: 'x-prevent',
-      created: function() {
-        this.stream = [];
-      },
-      handle: function(e) {
-        this.stream.push(e);
-      },
       prevent: function(e, detail) {
         detail.prevent('tap');
         detail.prevent('track');
@@ -130,12 +141,7 @@
         'tap': 'handle',
         'track': 'handle'
       },
-      created: function() {
-        this.stream = [];
-      },
-      handle: function(e) {
-        this.stream.push(e);
-      }
+      behaviors: [EventCaptureBehavior]
     });
   </script>
 </dom-module>
@@ -144,23 +150,58 @@
   <script>
   Polymer({
     is: 'x-document-listener',
-    properties: {
-      stream: {
-        type: Array,
-        value: function() {
-          return [];
-        }
-      }
-    },
     setup: function() {
-      this.listen(document, 'down', 'handler');
+      this.listen(document, 'down', 'handle');
     },
     teardown: function() {
-      this.unlisten(document, 'down', 'handler');
+      this.unlisten(document, 'down', 'handle');
     },
-    handler: function(e) {
-      this.stream.push(e);
-    }
+    behaviors: [EventCaptureBehavior]
   });
   </script>
 </dom-module>
+
+<dom-module id="x-nested-child-prevent">
+  <script>
+    Polymer({
+      is: 'x-nested-child-prevent',
+      listeners: {
+        tap: 'handle'
+      },
+      behaviors: [EventCaptureBehavior]
+    });
+  </script>
+</dom-module>
+
+<dom-module id="x-nested-prevent">
+  <template>
+    <style>
+      :host {
+        position: absolute;
+        display: block;
+        background: orange;
+        height: 100px;
+        width: 100px;
+      }
+      #child {
+        position: relative;
+        display: block;
+        background: blue;
+        height: 50px;
+        width: 50px;
+        margin-top: 25px;
+        margin-left: 25px;
+      }
+    </style>
+    <x-nested-child-prevent id="child"></x-nested-child-prevent>
+  </template>
+  <script>
+    Polymer({
+      is: 'x-nested-prevent',
+      listeners: {
+        track: 'handle'
+      },
+      behaviors: [EventCaptureBehavior]
+    });
+  </script>
+</dom-module>

test/unit/gestures.html

@@ -291,6 +291,52 @@
         assert.equal(el.stream[0].defaultPrevented, true, 'down was prevented');
         assert.equal(el.stream[1].type, 'up', 'up was found');
       });
+
+      test('nested track and tap with touch', function() {
+        el.parentNode.removeChild(el);
+        el = document.createElement('x-nested-prevent');
+        var child = el.$.child;
+        document.body.appendChild(el);
+        var options = {bubbles: true, cancelable: true};
+
+        var bgr = el.getBoundingClientRect();
+        var clientX = bgr.left + (bgr.width / 2);
+        var clientY = bgr.top + (bgr.bottom / 2);
+        var ev = new CustomEvent('touchstart', options);
+        ev.touches = ev.changedTouches = [
+          {
+            clientX: clientX,
+            clientY: clientY,
+            identifier: 1,
+            target: child
+          }
+        ];
+        ev.clientX = clientX;
+        ev.clientY = clientY;
+        ev.__polymerSimulatedTouch = true;
+        child.dispatchEvent(ev);
+
+        for (var i = 0; i < 10; i++) {
+          clientX += 1;
+          ev = new CustomEvent(i === 9 ? 'touchend' : 'touchmove', options);
+          ev.touches = ev.changedTouches = [
+            {
+              clientX: clientX,
+              clientY: clientY,
+              identifier: 1,
+              target: child
+            }
+          ];
+          ev.clientX = clientX;
+          ev.clientY = clientY;
+          // tell gestures to not turn off mouse events
+          ev.__polymerSimulatedTouch = true;
+          child.dispatchEvent(ev);
+        }
+
+        assert.equal(child.stream.length, 0, 'expected no taps on the child');
+        assert.notEqual(el.stream.length, 0, 'expected some tracks on the parent');
+      });
     });
 
     suite('Buttons', function() {