make ripple touch events passive

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 '../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 } : {};
+    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;
+})();