Add passive events detection

Author: dy

src/components/dragelement/index.js

@@ -27,6 +27,8 @@ var unhover = require('./unhover');
 dragElement.unhover = unhover.wrapped;
 dragElement.unhoverRaw = unhover.raw;
 
+var supportsPassive = Lib.eventListenerOptionsSupported();
+
 /**
  * Abstracts click & drag interactions
  *
@@ -102,11 +104,16 @@ dragElement.init = function init(options) {
 
     element.onmousedown = onStart;
 
-    if(element._ontouchstart) {
-        element.removeEventListener('touchstart', element._ontouchstart);
+    if(!supportsPassive) {
+        element.ontouchstart = onStart;
+    }
+    else {
+        if(element._ontouchstart) {
+            element.removeEventListener('touchstart', element._ontouchstart);
+        }
+        element._ontouchstart = onStart;
+        element.addEventListener('touchstart', onStart, {passive: false});
     }
-    element._ontouchstart = onStart;
-    element.addEventListener('touchstart', onStart, {passive: false});
 
     function _clampFn(dx, dy, minDrag) {
         if(Math.abs(dx) < minDrag) dx = 0;

src/lib/index.js

@@ -890,3 +890,25 @@ lib.subplotSort = function(a, b) {
     }
     return numB - numA;
 };
+
+/*
+ * test if event listener options supported
+ */
+lib.eventListenerOptionsSupported = function() {
+    var supported = false;
+
+    try {
+        var opts = Object.defineProperty({}, 'passive', {
+            get: function() {
+                supported = true;
+            }
+        });
+
+        window.addEventListener('test', null, opts);
+        window.removeEventListener('test', null, opts);
+    } catch(e) {
+        supported = false;
+    }
+
+    return supported;
+};

src/plots/cartesian/dragbox.js

@@ -34,6 +34,8 @@ var constants = require('./constants');
 var MINDRAG = constants.MINDRAG;
 var MINZOOM = constants.MINZOOM;
 
+var supportsPassive = Lib.eventListenerOptionsSupported();
+
 // flag for showing "doubleclick to zoom out" only at the beginning
 var SHOWZOOMOUTTIP = true;
 
@@ -1041,14 +1043,20 @@ function calcLinks(constraintGroups, xIDs, yIDs) {
 
 // still seems to be some confusion about onwheel vs onmousewheel...
 function attachWheelEventHandler(element, handler) {
-    var wheelEventName = element.onwheel !== undefined ? 'wheel' : 'mousewheel';
-
-    if(element._onwheel) {
-        element.removeEventListener(wheelEventName, element._onwheel);
+    if(!supportsPassive) {
+        if(element.onwheel !== undefined) element.onwheel = handler;
+        else if(element.onmousewheel !== undefined) element.onmousewheel = handler;
     }
-    element._onwheel = handler;
+    else {
+        var wheelEventName = element.onwheel !== undefined ? 'wheel' : 'mousewheel';
 
-    element.addEventListener(wheelEventName, handler, {passive: false});
+        if(element._onwheel) {
+            element.removeEventListener(wheelEventName, element._onwheel);
+        }
+        element._onwheel = handler;
+
+        element.addEventListener(wheelEventName, handler, {passive: false});
+    }
 }
 
 module.exports = {