fix(core): set wheel/touch listeners to passive for better perf (#769)

- this fixes warnings shown in Chrome and other browser console mentioning that we should consider using `passive` event listeners
- also uses a polyfill in case the `passive` option is not supported (for example IE)

slick.core.js

@@ -624,6 +624,32 @@
     return Object.entries(obj).length === 0;
   }
 
+  /**
+   * Check if `passive` option is supported when adding event listener, follows detection provided in MDN:
+   * https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#safely_detecting_option_support
+   */
+  function passiveSupported() {
+    let passiveSupported = false;
+
+    try {
+      const options = {
+        get passive() {
+          passiveSupported = true;
+          return false;
+        },
+      };
+      window.addEventListener('test', null, options);
+      window.removeEventListener('test', null, options);
+    } catch (err) {
+      passiveSupported = false;
+    }
+    return passiveSupported;
+  }
+
+  function enablePassiveWhenSupported() {
+    return passiveSupported() ? { passive: true } : false
+  }
+
   function noop() { }
 
   function emptyElement(element) {
@@ -936,6 +962,8 @@
       "calculateAvailableSpace": calculateAvailableSpace,
       "createDomElement": createDomElement,
       "emptyElement": emptyElement,
+      "passiveSupported": passiveSupported,
+      "enablePassiveWhenSupported": enablePassiveWhenSupported,
       "innerSize": innerSize,
       "isEmptyObject": isEmptyObject,
       "noop": noop,

slick.interactions.js

@@ -40,7 +40,7 @@
 
     if (containerElement) {
       containerElement.addEventListener('mousedown', userPressed);
-      containerElement.addEventListener('touchstart', userPressed);
+      containerElement.addEventListener('touchstart', userPressed, Slick.Utils.enablePassiveWhenSupported());
     }
 
     function executeDragCallbackWhenDefined(callback, e, dd) {
@@ -52,7 +52,7 @@
     function destroy() {
       if (containerElement) {
         containerElement.removeEventListener('mousedown', userPressed);
-        containerElement.removeEventListener('touchstart', userPressed);
+        containerElement.removeEventListener('touchstart', userPressed, Slick.Utils.enablePassiveWhenSupported());
       }
     }
 
@@ -204,7 +204,7 @@
     function destroy() {
       if (resizeableHandleElement && typeof resizeableHandleElement.removeEventListener === 'function') {
         resizeableHandleElement.removeEventListener('mousedown', resizeStartHandler);
-        resizeableHandleElement.removeEventListener('touchstart', resizeStartHandler);
+        resizeableHandleElement.removeEventListener('touchstart', resizeStartHandler, Slick.Utils.enablePassiveWhenSupported());
       }
     }
 
@@ -247,7 +247,7 @@
 
     // add event listeners on the draggable element
     resizeableHandleElement.addEventListener('mousedown', resizeStartHandler);
-    resizeableHandleElement.addEventListener('touchstart', resizeStartHandler);
+    resizeableHandleElement.addEventListener('touchstart', resizeStartHandler, Slick.Utils.enablePassiveWhenSupported());
 
     return { destroy };
   }