Make touch listeners passive when native touch-action and passive lis…

…teners supported Fixes #4667
Polymer · Jun 22, 2017 · 3c8b660 · 3c8b660
1 parent 48fdac7
commit 3c8b660
Show file tree

Hide file tree

Showing 2 changed files with 64 additions and 2 deletions.
diff --git a/lib/utils/gestures.html b/lib/utils/gestures.html
@@ -54,6 +54,17 @@
   // Check for touch-only devices
   let IS_TOUCH_ONLY = navigator.userAgent.match(/iP(?:[oa]d|hone)|Android/);
 
+  /**
+   * Returns true for touch events when supporting native touch action and passive event handlers
+   * to instruct event handlers to be passive.
+   *
+   * @param {string} eventName Name of the event
+   * @return {boolean} If the event listener should create passive handlers
+   */
+  function usePassive(eventName) {
+    return eventName.slice(0, 5) === 'touch' && SUPPORTS_PASSIVE && HAS_NATIVE_TA;
+  }
+
   // touch will make synthetic mouse events
   // `preventDefault` on touchend will cancel them,
   // but this breaks `<input>` focus and link clicks
@@ -432,7 +443,7 @@
           gobj[dep] = gd = {_count: 0};
         }
         if (gd._count === 0) {
-          node.addEventListener(dep, this._handleNative);
+          node.addEventListener(dep, this._handleNative, usePassive(dep) ? {passive: true} : false);
         }
         gd[name] = (gd[name] || 0) + 1;
         gd._count = (gd._count || 0) + 1;
@@ -464,7 +475,7 @@
             gd[name] = (gd[name] || 1) - 1;
             gd._count = (gd._count || 1) - 1;
             if (gd._count === 0) {
-              node.removeEventListener(dep, this._handleNative);
+              node.removeEventListener(dep, this._handleNative, usePassive(dep) ? {passive: true} : false);
             }
           }
         }

diff --git a/test/smoke/passive.html b/test/smoke/passive.html
@@ -0,0 +1,51 @@
+<!doctype html>
+<!--
+@license
+Copyright (c) 2017 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+-->
+<!--
+  Port of https://github.com/Polymer/polymer/issues/4211
+  Credit @MartinsThiago
+-->
+<html>
+<head>
+  <script src="../../../webcomponentsjs/webcomponents-loader.js"></script>
+  <link rel="import" href="../../polymer.html">
+  <!--<link rel="import" href="https://polygit.org/polymer+2/shadycss+webcomponents+1/components/polymer/polymer.html">-->
+</head>
+<body>
+  <dom-module id="x-foo">
+    <template>
+      <style>
+        :host {
+          display: block;
+          height: 300px;
+          width: 300px;
+          background-color: lightgreen;
+        }
+      </style>
+    </template>
+    <script>
+      addEventListener('WebComponentsReady', () => {
+        class XFoo extends Polymer.LegacyElementMixin(HTMLElement) {
+          static get is() {return 'x-foo'}
+          ready() {
+            super.ready();
+            this.listen(this, 'tap', '_tapHandler');
+          }
+          _tapHandler(e) {
+            console.log(e);
+          }
+        }
+        customElements.define(XFoo.is, XFoo);
+      });
+    </script>
+  </dom-module>
+  <x-foo></x-foo>
+</body>
+</html>