Fixed #11353, added support for passive touch events.

highcharts · Jul 20, 2020 · fec46b1 · fec46b1
1 parent 226365c
commit fec46b1
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 6 deletions.
diff --git a/js/Core/Globals.js b/js/Core/Globals.js
@@ -28,7 +28,19 @@ typeof win !== 'undefined' ?
     doc.createElementNS &&
     !!doc.createElementNS(SVG_NS, 'svg').createSVGRect), isMS = /(edge|msie|trident)/i.test(userAgent) && !glob.opera, isFirefox = userAgent.indexOf('Firefox') !== -1, isChrome = userAgent.indexOf('Chrome') !== -1, hasBidiBug = (isFirefox &&
     parseInt(userAgent.split('Firefox/')[1], 10) < 4 // issue #38
-);
+), noop = function () { }, 
+// Checks whether the browser supports passive events, (#11353).
+checkPassiveEvents = function () {
+    var supportsPassive = false;
+    var opts = Object.defineProperty({}, 'passive', {
+        get: function () {
+            supportsPassive = true;
+        }
+    });
+    glob.addEventListener('testPassive', noop, opts);
+    glob.removeEventListener('testPassive', noop, opts);
+    return supportsPassive;
+};
 var H = {
     product: 'Highcharts',
     version: '@product.version@',
@@ -46,10 +58,11 @@ var H = {
     chartCount: 0,
     seriesTypes: {},
     symbolSizes: {},
+    supportPassiveEvents: checkPassiveEvents(),
     svg: svg,
     win: glob,
     marginNames: ['plotTop', 'marginRight', 'marginBottom', 'plotLeft'],
-    noop: function () { },
+    noop: noop,
     /**
      * Theme options that should get applied to the chart. In module mode it
      * might not be possible to change this property because of read-only

diff --git a/js/Core/Utilities.js b/js/Core/Utilities.js
@@ -2187,8 +2187,12 @@ var addEvent = H.addEvent = function (el, type, fn, options) {
         el.series.chart.runTrackerClick = true;
     }
     // Handle DOM events
+    // If the browser supports passive events, add it to improve performance
+    // on touch events (#11353).
     if (addEventListener) {
-        addEventListener.call(el, type, fn, false);
+        addEventListener.call(el, type, fn, H.supportPassiveEvents ? {
+            passive: type.indexOf('touch') !== -1, capture: false
+        } : false);
     }
     if (!events[type]) {
         events[type] = [];

diff --git a/ts/Core/Globals.ts b/ts/Core/Globals.ts
@@ -72,6 +72,7 @@ declare global {
         const symbolSizes: Dictionary<SizeObject>;
         const win: GlobalWindow;
         const seriesTypes: SeriesTypesDictionary;
+        const supportPassiveEvents: boolean;
         const svg: boolean;
         const version: string;
         let theme: (Options|undefined);
@@ -166,7 +167,23 @@ var glob = ( // @todo UMD variable named `window`, and glob named `win`
     hasBidiBug = (
         isFirefox &&
         parseInt(userAgent.split('Firefox/')[1], 10) < 4 // issue #38
-    );
+    ),
+    noop = function (): void {},
+    // Checks whether the browser supports passive events, (#11353).
+    checkPassiveEvents = function (): boolean {
+        let supportsPassive = false;
+
+        const opts = Object.defineProperty({}, 'passive', {
+            get: function (): void {
+                supportsPassive = true;
+            }
+        });
+
+        glob.addEventListener('testPassive', noop, opts);
+        glob.removeEventListener('testPassive', noop, opts);
+
+        return supportsPassive;
+    };
 
 var H: typeof Highcharts = {
     product: 'Highcharts',
@@ -185,10 +202,11 @@ var H: typeof Highcharts = {
     chartCount: 0,
     seriesTypes: {} as Highcharts.SeriesTypesDictionary,
     symbolSizes: {},
+    supportPassiveEvents: checkPassiveEvents(),
     svg: svg,
     win: glob,
     marginNames: ['plotTop', 'marginRight', 'marginBottom', 'plotLeft'],
-    noop: function (): void {},
+    noop: noop,
 
     /**
      * Theme options that should get applied to the chart. In module mode it

diff --git a/ts/Core/Utilities.ts b/ts/Core/Utilities.ts
@@ -3025,8 +3025,12 @@ const addEvent = H.addEvent = function<T> (
     }
 
     // Handle DOM events
+    // If the browser supports passive events, add it to improve performance
+    // on touch events (#11353).
     if (addEventListener) {
-        addEventListener.call(el, type, fn, false);
+        addEventListener.call(el, type, fn, H.supportPassiveEvents ? {
+            passive: type.indexOf('touch') !== -1, capture: false
+        } : false);
     }
 
     if (!events[type]) {