diff --git a/slick.core.js b/slick.core.js index 1a778485..a624a225 100644 --- a/slick.core.js +++ b/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, diff --git a/slick.interactions.js b/slick.interactions.js index f34f9bd6..e4191477 100644 --- a/slick.interactions.js +++ b/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 }; }