From 5adb727526035ec493c8c3a70ac80131671102d7 Mon Sep 17 00:00:00 2001
From: Dmitry <df.creative@gmail.com>
Date: Mon, 15 Jan 2018 19:58:28 +0300
Subject: [PATCH 1/2] Mute event listener logging

---
 src/components/dragelement/index.js |  7 ++++++-
 src/plots/cartesian/dragbox.js      | 11 ++++++++---
 2 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/src/components/dragelement/index.js b/src/components/dragelement/index.js
index 4b505d3e5e5..8a9356e86eb 100644
--- a/src/components/dragelement/index.js
+++ b/src/components/dragelement/index.js
@@ -97,7 +97,12 @@ dragElement.init = function init(options) {
     element.style.pointerEvents = 'all';
 
     element.onmousedown = onStart;
-    element.ontouchstart = onStart;
+
+    if(element._ontouchstart) {
+        element.removeEventListener('touchstart', element._ontouchstart);
+    }
+    element._ontouchstart = onStart;
+    element.addEventListener('touchstart', onStart, {passive: false});
 
     function onStart(e) {
         // make dragging and dragged into properties of gd
diff --git a/src/plots/cartesian/dragbox.js b/src/plots/cartesian/dragbox.js
index ab558194871..e7aeb76d126 100644
--- a/src/plots/cartesian/dragbox.js
+++ b/src/plots/cartesian/dragbox.js
@@ -434,9 +434,14 @@ module.exports = function dragBox(gd, plotinfo, x, y, w, h, ns, ew) {
 
     // everything but the corners gets wheel zoom
     if(ns.length * ew.length !== 1) {
-        // still seems to be some confusion about onwheel vs onmousewheel...
-        if(dragger.onwheel !== undefined) dragger.onwheel = zoomWheel;
-        else if(dragger.onmousewheel !== undefined) dragger.onmousewheel = zoomWheel;
+        var wheelEventName = dragger.onwheel !== undefined ? 'wheel' : 'mousewheel';
+
+        if(dragger._onwheel) {
+            dragger.removeEventListener(wheelEventName, dragger._onwheel);
+        }
+        dragger._onwheel = zoomWheel;
+
+        dragger.addEventListener(wheelEventName, zoomWheel, {passive: false});
     }
 
     // plotDrag: move the plot in response to a drag

From a32a21aac96e6efdeed5dffbcf193ecbf838a533 Mon Sep 17 00:00:00 2001
From: Dmitry <df.creative@gmail.com>
Date: Thu, 18 Jan 2018 13:15:28 +0300
Subject: [PATCH 2/2] Add passive events detection

---
 src/components/dragelement/index.js | 15 +++++++++++----
 src/lib/index.js                    | 22 ++++++++++++++++++++++
 src/plots/cartesian/dragbox.js      | 20 ++++++++++++++------
 3 files changed, 47 insertions(+), 10 deletions(-)

diff --git a/src/components/dragelement/index.js b/src/components/dragelement/index.js
index 8a833a7d486..57ff1f554ee 100644
--- a/src/components/dragelement/index.js
+++ b/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;
diff --git a/src/lib/index.js b/src/lib/index.js
index fe501894dc0..7c44a2c8d6e 100644
--- a/src/lib/index.js
+++ b/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;
+};
diff --git a/src/plots/cartesian/dragbox.js b/src/plots/cartesian/dragbox.js
index ad23fbf0496..2e2404b7579 100644
--- a/src/plots/cartesian/dragbox.js
+++ b/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 = {