Dispatch gesture to the original native event target

Fixes #1921 Update tests with new event target expectations Incorporate structure from http://jsbin.com/lohepic/edit?html,console,output
Polymer · Jul 1, 2015 · a43471f · a43471f
1 parent f201980
commit a43471f
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 23 deletions.
diff --git a/src/standard/gestures.html b/src/standard/gestures.html
@@ -123,6 +123,15 @@
       }
       return node;
     },
+    // a cheaper check than Polymer.dom(ev).path[0];
+    findOriginalTarget: function(ev) {
+      // shadowdom
+      if (ev.path) {
+        return ev.path[0];
+      }
+      // shadydom
+      return ev.target;
+    },
     handleNative: function(ev) {
       var handled;
       var type = ev.type;
@@ -317,7 +326,7 @@
     emits: ['down', 'up'],
 
     mousedown: function(e) {
-      var t = e.currentTarget;
+      var t = Gestures.findOriginalTarget(e);
       var self = this;
       var upfn = function upfn(e) {
         self.fire('up', t, e);
@@ -327,10 +336,10 @@
       this.fire('down', t, e);
     },
     touchstart: function(e) {
-      this.fire('down', e.currentTarget, e.changedTouches[0]);
+      this.fire('down', Gestures.findOriginalTarget(e), e.changedTouches[0]);
     },
     touchend: function(e) {
-      this.fire('up', e.currentTarget, e.changedTouches[0]);
+      this.fire('up', Gestures.findOriginalTarget(e), e.changedTouches[0]);
     },
     fire: function(type, target, event) {
       var self = this;
@@ -386,7 +395,7 @@
     },
 
     mousedown: function(e) {
-      var t = e.currentTarget;
+      var t = Gestures.findOriginalTarget(e);
       var self = this;
       var movefn = function movefn(e) {
         var x = e.clientX, y = e.clientY;
@@ -422,7 +431,7 @@
     },
 
     touchmove: function(e) {
-      var t = e.currentTarget;
+      var t = Gestures.findOriginalTarget(e);
       var ct = e.changedTouches[0];
       var x = ct.clientX, y = ct.clientY;
       if (this.hasMovedEnough(x, y)) {
@@ -434,7 +443,7 @@
     },
 
     touchend: function(e) {
-      var t = e.currentTarget;
+      var t = Gestures.findOriginalTarget(e);
       var ct = e.changedTouches[0];
       // only trackend if track was started and not aborted
       if (this.info.started) {
@@ -497,7 +506,6 @@
     mousedown: function(e) {
       this.save(e);
     },
-
     click: function(e) {
       this.forward(e);
     },
@@ -512,11 +520,12 @@
     forward: function(e) {
       var dx = Math.abs(e.clientX - this.info.x);
       var dy = Math.abs(e.clientY - this.info.y);
+      var t = Gestures.findOriginalTarget(e);
       // dx,dy can be NaN if `click` has been simulated and there was no `down` for `start`
       if (isNaN(dx) || isNaN(dy) || (dx <= TAP_DISTANCE && dy <= TAP_DISTANCE)) {
         // prevent taps from being generated if an event has canceled them
         if (!this.info.prevent) {
-          Gestures.fire(e.target, 'tap', {
+          Gestures.fire(t, 'tap', {
             x: e.clientX,
             y: e.clientY,
             sourceEvent: e

diff --git a/test/unit/gestures-elements.html b/test/unit/gestures-elements.html
@@ -19,15 +19,19 @@
   </style>
 
   <template>
-    <div id="div" on-tap="tapHandler"></div>
+    <div id="div"></div>
   </template>
 
   <script>
     Polymer({
       is: 'x-foo',
+      listeners: {
+        tap: 'tapHandler'
+      },
       tapHandler: function(e) {
-        this._testLocalTarget = Polymer.dom(e).localTarget;
-        this._testRootTarget = Polymer.dom(e).rootTarget;
+        var ev = Polymer.dom(e);
+        this._testLocalTarget = ev.localTarget;
+        this._testRootTarget = ev.rootTarget;
       }
     });
   </script>
@@ -36,15 +40,19 @@
 <dom-module id="x-app">
 
   <template>
-    <x-foo id="foo" on-tap="tapHandler"></x-foo>
+    <x-foo id="foo"></x-foo>
   </template>
 
   <script>
     Polymer({
       is: 'x-app',
+      listeners: {
+        tap: 'tapHandler'
+      },
       tapHandler: function(e) {
-        this._testLocalTarget = Polymer.dom(e).localTarget;
-        this._testRootTarget = Polymer.dom(e).rootTarget;
+        var ev = Polymer.dom(e);
+        this._testLocalTarget = ev.localTarget;
+        this._testRootTarget = ev.rootTarget;
       }
     });
   </script>

diff --git a/test/unit/gestures.html b/test/unit/gestures.html
@@ -38,19 +38,19 @@
 
       test('tap on x-foo and check localTarget and rootTarget', function() {
         var foo = app.$.foo;
-        foo.dispatchEvent(new CustomEvent('click'));
-        assert.equal(app._testLocalTarget, foo);
-        assert.equal(app._testRootTarget, foo);
+        foo.dispatchEvent(new CustomEvent('click', {bubble: true}));
+        assert.equal(app._testLocalTarget, app, 'local target');
+        assert.equal(app._testRootTarget, foo, 'root target');
       });
 
-      test('tap on x-foo.div and check localTarget and rootTarget', function() {
+      test('tap on x-foo.div and check target info', function() {
         var foo = app.$.foo;
         var div = foo.$.div;
-        div.dispatchEvent(new CustomEvent('click'));
-        assert.equal(app._testLocalTarget, foo);
-        assert.equal(app._testRootTarget, div);
-        assert.equal(foo._testLocalTarget, div);
-        assert.equal(foo._testRootTarget, div);
+        div.dispatchEvent(new CustomEvent('click', {bubbles: true}));
+        assert.equal(app._testLocalTarget, app, 'app local target');
+        assert.equal(app._testRootTarget, div, 'app root target');
+        assert.equal(foo._testLocalTarget, foo, 'foo local target');
+        assert.equal(foo._testRootTarget, div, 'foo root target');
       });
 
     });