diff --git a/src/components/dragelement/index.js b/src/components/dragelement/index.js index f727bd99b8..57ff1f554e 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 * @@ -101,7 +103,17 @@ dragElement.init = function init(options) { element.style.pointerEvents = 'all'; element.onmousedown = onStart; - element.ontouchstart = onStart; + + if(!supportsPassive) { + element.ontouchstart = onStart; + } + else { + if(element._ontouchstart) { + element.removeEventListener('touchstart', element._ontouchstart); + } + 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 fe501894dc..7c44a2c8d6 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 044e45be39..2e2404b757 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,8 +1043,20 @@ function calcLinks(constraintGroups, xIDs, yIDs) { // still seems to be some confusion about onwheel vs onmousewheel... function attachWheelEventHandler(element, handler) { - if(element.onwheel !== undefined) element.onwheel = handler; - else if(element.onmousewheel !== undefined) element.onmousewheel = handler; + if(!supportsPassive) { + if(element.onwheel !== undefined) element.onwheel = handler; + else if(element.onmousewheel !== undefined) element.onmousewheel = handler; + } + else { + var wheelEventName = element.onwheel !== undefined ? 'wheel' : 'mousewheel'; + + if(element._onwheel) { + element.removeEventListener(wheelEventName, element._onwheel); + } + element._onwheel = handler; + + element.addEventListener(wheelEventName, handler, {passive: false}); + } } module.exports = {