make ripple touch events passive

addon/components/paper-tooltip.js

@@ -7,6 +7,7 @@ import { getOwner } from '@ember/application';
 import layout from '../templates/components/paper-tooltip';
 import $ from 'jquery';
 import getParent from 'ember-paper/utils/get-parent';
+import { supportsPassiveEventListeners } from 'ember-paper/utils/browser-features';
 
 export default Component.extend({
   tagName: '',
@@ -93,8 +94,10 @@ export default Component.extend({
     };
 
     anchorElement.addEventListener('focus', enterEventHandler);
-    anchorElement.addEventListener('touchstart', enterEventHandler);
     anchorElement.addEventListener('mouseenter', enterEventHandler);
+    anchorElement.addEventListener('touchstart',
+      enterEventHandler,
+      supportsPassiveEventListeners ? { passive: true } : false);
 
     window.addEventListener('scroll', leaveHandler);
     window.addEventListener('blur', leaveHandler);

addon/mixins/ripple-mixin.js

@@ -7,10 +7,13 @@ import { computed } from '@ember/object';
 import Mixin from '@ember/object/mixin';
 import { run } from '@ember/runloop';
 import $ from 'jquery';
+import { supportsPassiveEventListeners } from 'ember-paper/utils/browser-features';
+
 /* global window */
 
 const DURATION = 400;
 
+
 /**
  * @class RippleMixin
  * @extends Ember.Mixin
@@ -129,11 +132,16 @@ export default Mixin.create({
 
   },
   bindEvents() {
-    this.rippleElement.on('mousedown', run.bind(this, this.handleMousedown));
-    this.rippleElement.on('mouseup touchend', run.bind(this, this.handleMouseup));
-    this.rippleElement.on('mouseleave', run.bind(this, this.handleMouseup));
-    this.rippleElement.on('touchmove', run.bind(this, this.handleTouchmove));
+    let re = this.rippleElement.get(0);
+    re.addEventListener('mousedown', run.bind(this, this.handleMousedown));
+    re.addEventListener('mouseup', run.bind(this, this.handleMouseup));
+    re.addEventListener('mouseleave', run.bind(this, this.handleMouseup));
+
+    let options = supportsPassiveEventListeners ? { passive: true } : false;
+    re.addEventListener('touchend', run.bind(this, this.handleMouseup), options);
+    re.addEventListener('touchmove', run.bind(this, this.handleTouchmove), options);
   },
+
   handleMousedown(event) {
     if (this.mousedown) {
       return;

addon/utils/browser-features.js

@@ -0,0 +1,14 @@
+ // Taken from https://github.com/Modernizr/Modernizr/blob/master/feature-detects/dom/passiveeventlisteners.js
+ export const supportsPassiveEventListeners = (function() {
+  let supportsPassiveOption = false;
+  try {
+    const opts = Object.defineProperty({}, 'passive', {
+      get: function() {
+        supportsPassiveOption = true;
+      }
+    });
+    window.addEventListener('test', null, opts);
+    // eslint-disable-next-line
+  } catch (e) {};
+  return supportsPassiveOption;
+})();