Browse Source

Bug Fix: Check the `cancelable` property to prevent the wheel event from moving the slider when the cursor is outside the track.

NaotoshiFujita 3 years ago
parent
commit
34172a8e1a

File diff suppressed because it is too large
+ 1 - 1
dist/js/splide-renderer.min.js


+ 18 - 15
dist/js/splide.cjs.js

@@ -1,6 +1,6 @@
 /*!
  * Splide.js
- * Version  : 3.4.0
+ * Version  : 3.4.1
  * License  : MIT
  * Copyright: 2021 Naotoshi Fujita
  */
@@ -108,7 +108,7 @@ function before(nodes, ref) {
 }
 
 function matches(elm, selector) {
-  return (elm["msMatchesSelector"] || elm.matches).call(elm, selector);
+  return isHTMLElement(elm) && (elm["msMatchesSelector"] || elm.matches).call(elm, selector);
 }
 
 function children(parent, selector) {
@@ -1727,6 +1727,8 @@ function Scroll(Splide2, Components2, options) {
   };
 }
 
+const SCROLL_LISTENER_OPTIONS = { passive: false, capture: true };
+
 const FRICTION = 5;
 const LOG_INTERVAL = 200;
 const POINTER_DOWN_EVENTS = "touchstart mousedown";
@@ -1739,7 +1741,6 @@ function Drag(Splide2, Components2, options) {
   const { track } = Components2.Elements;
   const { resolve, orient } = Components2.Direction;
   const { getPosition, exceededLimit } = Move;
-  const listenerOptions = { passive: false, capture: true };
   let basePosition;
   let baseEvent;
   let prevBaseEvent;
@@ -1751,9 +1752,9 @@ function Drag(Splide2, Components2, options) {
   let disabled;
   let target;
   function mount() {
-    bind(track, POINTER_MOVE_EVENTS, noop, listenerOptions);
-    bind(track, POINTER_UP_EVENTS, noop, listenerOptions);
-    bind(track, POINTER_DOWN_EVENTS, onPointerDown, listenerOptions);
+    bind(track, POINTER_MOVE_EVENTS, noop, SCROLL_LISTENER_OPTIONS);
+    bind(track, POINTER_UP_EVENTS, noop, SCROLL_LISTENER_OPTIONS);
+    bind(track, POINTER_DOWN_EVENTS, onPointerDown, SCROLL_LISTENER_OPTIONS);
     bind(track, "click", onClick, { capture: true });
     bind(track, "dragstart", prevent);
     on([EVENT_MOUNTED, EVENT_UPDATED], init);
@@ -1767,15 +1768,15 @@ function Drag(Splide2, Components2, options) {
     if (!disabled) {
       const { noDrag } = options;
       const isTouch = isTouchEvent(e);
-      const isDraggable = !noDrag || isHTMLElement(e.target) && !matches(e.target, noDrag);
+      const isDraggable = !noDrag || !matches(e.target, noDrag);
       if (isDraggable && (isTouch || !e.button)) {
         if (!Move.isBusy()) {
           target = isTouch ? track : window;
           prevBaseEvent = null;
           lastEvent = null;
           clickPrevented = false;
-          bind(target, POINTER_MOVE_EVENTS, onPointerMove, listenerOptions);
-          bind(target, POINTER_UP_EVENTS, onPointerUp, listenerOptions);
+          bind(target, POINTER_MOVE_EVENTS, onPointerMove, SCROLL_LISTENER_OPTIONS);
+          bind(target, POINTER_UP_EVENTS, onPointerUp, SCROLL_LISTENER_OPTIONS);
           Move.cancel();
           Scroll.cancel();
           save(e);
@@ -2180,15 +2181,17 @@ function Wheel(Splide2, Components2, options) {
   const { bind } = EventInterface(Splide2);
   function mount() {
     if (options.wheel) {
-      bind(Components2.Elements.track, "wheel", onWheel, { passive: false, capture: true });
+      bind(Components2.Elements.track, "wheel", onWheel, SCROLL_LISTENER_OPTIONS);
     }
   }
   function onWheel(e) {
-    const { deltaY } = e;
-    if (deltaY) {
-      const backwards = deltaY < 0;
-      Splide2.go(backwards ? "<" : ">");
-      shouldPrevent(backwards) && prevent(e);
+    if (e.cancelable) {
+      const { deltaY } = e;
+      if (deltaY) {
+        const backwards = deltaY < 0;
+        Splide2.go(backwards ? "<" : ">");
+        shouldPrevent(backwards) && prevent(e);
+      }
     }
   }
   function shouldPrevent(backwards) {

+ 18 - 15
dist/js/splide.esm.js

@@ -1,6 +1,6 @@
 /*!
  * Splide.js
- * Version  : 3.4.0
+ * Version  : 3.4.1
  * License  : MIT
  * Copyright: 2021 Naotoshi Fujita
  */
@@ -104,7 +104,7 @@ function before(nodes, ref) {
 }
 
 function matches(elm, selector) {
-  return (elm["msMatchesSelector"] || elm.matches).call(elm, selector);
+  return isHTMLElement(elm) && (elm["msMatchesSelector"] || elm.matches).call(elm, selector);
 }
 
 function children(parent, selector) {
@@ -1723,6 +1723,8 @@ function Scroll(Splide2, Components2, options) {
   };
 }
 
+const SCROLL_LISTENER_OPTIONS = { passive: false, capture: true };
+
 const FRICTION = 5;
 const LOG_INTERVAL = 200;
 const POINTER_DOWN_EVENTS = "touchstart mousedown";
@@ -1735,7 +1737,6 @@ function Drag(Splide2, Components2, options) {
   const { track } = Components2.Elements;
   const { resolve, orient } = Components2.Direction;
   const { getPosition, exceededLimit } = Move;
-  const listenerOptions = { passive: false, capture: true };
   let basePosition;
   let baseEvent;
   let prevBaseEvent;
@@ -1747,9 +1748,9 @@ function Drag(Splide2, Components2, options) {
   let disabled;
   let target;
   function mount() {
-    bind(track, POINTER_MOVE_EVENTS, noop, listenerOptions);
-    bind(track, POINTER_UP_EVENTS, noop, listenerOptions);
-    bind(track, POINTER_DOWN_EVENTS, onPointerDown, listenerOptions);
+    bind(track, POINTER_MOVE_EVENTS, noop, SCROLL_LISTENER_OPTIONS);
+    bind(track, POINTER_UP_EVENTS, noop, SCROLL_LISTENER_OPTIONS);
+    bind(track, POINTER_DOWN_EVENTS, onPointerDown, SCROLL_LISTENER_OPTIONS);
     bind(track, "click", onClick, { capture: true });
     bind(track, "dragstart", prevent);
     on([EVENT_MOUNTED, EVENT_UPDATED], init);
@@ -1763,15 +1764,15 @@ function Drag(Splide2, Components2, options) {
     if (!disabled) {
       const { noDrag } = options;
       const isTouch = isTouchEvent(e);
-      const isDraggable = !noDrag || isHTMLElement(e.target) && !matches(e.target, noDrag);
+      const isDraggable = !noDrag || !matches(e.target, noDrag);
       if (isDraggable && (isTouch || !e.button)) {
         if (!Move.isBusy()) {
           target = isTouch ? track : window;
           prevBaseEvent = null;
           lastEvent = null;
           clickPrevented = false;
-          bind(target, POINTER_MOVE_EVENTS, onPointerMove, listenerOptions);
-          bind(target, POINTER_UP_EVENTS, onPointerUp, listenerOptions);
+          bind(target, POINTER_MOVE_EVENTS, onPointerMove, SCROLL_LISTENER_OPTIONS);
+          bind(target, POINTER_UP_EVENTS, onPointerUp, SCROLL_LISTENER_OPTIONS);
           Move.cancel();
           Scroll.cancel();
           save(e);
@@ -2176,15 +2177,17 @@ function Wheel(Splide2, Components2, options) {
   const { bind } = EventInterface(Splide2);
   function mount() {
     if (options.wheel) {
-      bind(Components2.Elements.track, "wheel", onWheel, { passive: false, capture: true });
+      bind(Components2.Elements.track, "wheel", onWheel, SCROLL_LISTENER_OPTIONS);
     }
   }
   function onWheel(e) {
-    const { deltaY } = e;
-    if (deltaY) {
-      const backwards = deltaY < 0;
-      Splide2.go(backwards ? "<" : ">");
-      shouldPrevent(backwards) && prevent(e);
+    if (e.cancelable) {
+      const { deltaY } = e;
+      if (deltaY) {
+        const backwards = deltaY < 0;
+        Splide2.go(backwards ? "<" : ">");
+        shouldPrevent(backwards) && prevent(e);
+      }
     }
   }
   function shouldPrevent(backwards) {

+ 20 - 21
dist/js/splide.js

@@ -4,7 +4,7 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
 
 /*!
  * Splide.js
- * Version  : 3.4.0
+ * Version  : 3.4.1
  * License  : MIT
  * Copyright: 2021 Naotoshi Fujita
  */
@@ -118,7 +118,7 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
   }
 
   function matches(elm, selector) {
-    return (elm["msMatchesSelector"] || elm.matches).call(elm, selector);
+    return isHTMLElement(elm) && (elm["msMatchesSelector"] || elm.matches).call(elm, selector);
   }
 
   function children(parent, selector) {
@@ -2073,6 +2073,10 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
     };
   }
 
+  var SCROLL_LISTENER_OPTIONS = {
+    passive: false,
+    capture: true
+  };
   var FRICTION = 5;
   var LOG_INTERVAL = 200;
   var POINTER_DOWN_EVENTS = "touchstart mousedown";
@@ -2095,10 +2099,6 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
         orient = _Components2$Directio2.orient;
     var getPosition = Move.getPosition,
         exceededLimit = Move.exceededLimit;
-    var listenerOptions = {
-      passive: false,
-      capture: true
-    };
     var basePosition;
     var baseEvent;
     var prevBaseEvent;
@@ -2111,9 +2111,9 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
     var target;
 
     function mount() {
-      bind(track, POINTER_MOVE_EVENTS, noop, listenerOptions);
-      bind(track, POINTER_UP_EVENTS, noop, listenerOptions);
-      bind(track, POINTER_DOWN_EVENTS, onPointerDown, listenerOptions);
+      bind(track, POINTER_MOVE_EVENTS, noop, SCROLL_LISTENER_OPTIONS);
+      bind(track, POINTER_UP_EVENTS, noop, SCROLL_LISTENER_OPTIONS);
+      bind(track, POINTER_DOWN_EVENTS, onPointerDown, SCROLL_LISTENER_OPTIONS);
       bind(track, "click", onClick, {
         capture: true
       });
@@ -2131,7 +2131,7 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
       if (!disabled) {
         var noDrag = options.noDrag;
         var isTouch = isTouchEvent(e);
-        var isDraggable = !noDrag || isHTMLElement(e.target) && !matches(e.target, noDrag);
+        var isDraggable = !noDrag || !matches(e.target, noDrag);
 
         if (isDraggable && (isTouch || !e.button)) {
           if (!Move.isBusy()) {
@@ -2139,8 +2139,8 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
             prevBaseEvent = null;
             lastEvent = null;
             clickPrevented = false;
-            bind(target, POINTER_MOVE_EVENTS, onPointerMove, listenerOptions);
-            bind(target, POINTER_UP_EVENTS, onPointerUp, listenerOptions);
+            bind(target, POINTER_MOVE_EVENTS, onPointerMove, SCROLL_LISTENER_OPTIONS);
+            bind(target, POINTER_UP_EVENTS, onPointerUp, SCROLL_LISTENER_OPTIONS);
             Move.cancel();
             Scroll.cancel();
             save(e);
@@ -2671,20 +2671,19 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
 
     function mount() {
       if (options.wheel) {
-        bind(Components2.Elements.track, "wheel", onWheel, {
-          passive: false,
-          capture: true
-        });
+        bind(Components2.Elements.track, "wheel", onWheel, SCROLL_LISTENER_OPTIONS);
       }
     }
 
     function onWheel(e) {
-      var deltaY = e.deltaY;
+      if (e.cancelable) {
+        var deltaY = e.deltaY;
 
-      if (deltaY) {
-        var backwards = deltaY < 0;
-        Splide2.go(backwards ? "<" : ">");
-        shouldPrevent(backwards) && prevent(e);
+        if (deltaY) {
+          var backwards = deltaY < 0;
+          Splide2.go(backwards ? "<" : ">");
+          shouldPrevent(backwards) && prevent(e);
+        }
       }
     }
 

File diff suppressed because it is too large
+ 0 - 0
dist/js/splide.js.map


File diff suppressed because it is too large
+ 2 - 2
dist/js/splide.min.js


BIN
dist/js/splide.min.js.gz


+ 1 - 1
dist/types/components/Drag/Drag.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Drag.d.ts","sourceRoot":"","sources":["Drag.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAClD,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAKjE;;;;GAIG;AACH,MAAM,WAAW,aAAc,SAAQ,aAAa;IAClD,OAAO,CAAE,QAAQ,EAAE,OAAO,GAAI,IAAI,CAAC;IACnC,UAAU,IAAI,OAAO,CAAC;CACvB;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,IAAI,CAAE,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,UAAU,EAAE,OAAO,EAAE,OAAO,GAAI,aAAa,CA0U9F"}
+{"version":3,"file":"Drag.d.ts","sourceRoot":"","sources":["Drag.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAClD,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAKjE;;;;GAIG;AACH,MAAM,WAAW,aAAc,SAAQ,aAAa;IAClD,OAAO,CAAE,QAAQ,EAAE,OAAO,GAAI,IAAI,CAAC;IACnC,UAAU,IAAI,OAAO,CAAC;CACvB;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,IAAI,CAAE,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,UAAU,EAAE,OAAO,EAAE,OAAO,GAAI,aAAa,CAyU9F"}

+ 1 - 1
dist/types/components/Wheel/Wheel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Wheel.d.ts","sourceRoot":"","sources":["Wheel.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAClD,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAIjE;;;;GAIG;AACH,MAAM,WAAW,cAAe,SAAQ,aAAa;CACpD;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,KAAK,CAAE,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,UAAU,EAAE,OAAO,EAAE,OAAO,GAAI,cAAc,CA2ChG"}
+{"version":3,"file":"Wheel.d.ts","sourceRoot":"","sources":["Wheel.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAClD,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAIjE;;;;GAIG;AACH,MAAM,WAAW,cAAe,SAAQ,aAAa;CACpD;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,KAAK,CAAE,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,UAAU,EAAE,OAAO,EAAE,OAAO,GAAI,cAAc,CA6ChG"}

+ 1 - 1
dist/types/utils/dom/matches/matches.d.ts

@@ -6,5 +6,5 @@
  *
  * @return `true` if the selector matches the element, or otherwise `false`.
  */
-export declare function matches(elm: Element, selector: string): boolean;
+export declare function matches(elm: Element | EventTarget, selector: string): boolean;
 //# sourceMappingURL=../../../../../src/js/utils/dom/matches/matches.d.ts.map

+ 1 - 1
dist/types/utils/dom/matches/matches.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"matches.d.ts","sourceRoot":"","sources":["matches.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,wBAAgB,OAAO,CAAE,GAAG,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,GAAI,OAAO,CAEjE"}
+{"version":3,"file":"matches.d.ts","sourceRoot":"","sources":["matches.ts"],"names":[],"mappings":"AAGA;;;;;;;GAOG;AACH,wBAAgB,OAAO,CAAE,GAAG,EAAE,OAAO,GAAG,WAAW,EAAE,QAAQ,EAAE,MAAM,GAAI,OAAO,CAE/E"}

+ 1 - 1
package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@splidejs/splide",
-  "version": "3.4.0",
+  "version": "3.4.1",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

+ 1 - 1
package.json

@@ -1,6 +1,6 @@
 {
   "name": "@splidejs/splide",
-  "version": "3.4.0",
+  "version": "3.4.1",
   "description": "Splide is a lightweight, flexible and accessible slider/carousel. No dependencies, no Lighthouse errors.",
   "author": "Naotoshi Fujita",
   "license": "MIT",

+ 8 - 8
src/js/components/Drag/Drag.ts

@@ -1,9 +1,10 @@
 import { EVENT_DRAG, EVENT_DRAGGED, EVENT_DRAGGING, EVENT_MOUNTED, EVENT_UPDATED } from '../../constants/events';
+import { SCROLL_LISTENER_OPTIONS } from '../../constants/listener-options';
 import { FADE, LOOP, SLIDE } from '../../constants/types';
 import { EventInterface } from '../../constructors';
 import { Splide } from '../../core/Splide/Splide';
 import { BaseComponent, Components, Options } from '../../types';
-import { abs, isHTMLElement, isObject, matches, min, noop, prevent, sign } from '../../utils';
+import { abs, isObject, matches, min, noop, prevent, sign } from '../../utils';
 import { FRICTION, LOG_INTERVAL, POINTER_DOWN_EVENTS, POINTER_MOVE_EVENTS, POINTER_UP_EVENTS } from './constants';
 
 
@@ -34,7 +35,6 @@ export function Drag( Splide: Splide, Components: Components, options: Options )
   const { track } = Components.Elements;
   const { resolve, orient } = Components.Direction;
   const { getPosition, exceededLimit } = Move;
-  const listenerOptions = { passive: false, capture: true };
 
   /**
    * The base slider position to calculate the delta of coords.
@@ -91,9 +91,9 @@ export function Drag( Splide: Splide, Components: Components, options: Options )
    * Called when the component is mounted.
    */
   function mount(): void {
-    bind( track, POINTER_MOVE_EVENTS, noop, listenerOptions );
-    bind( track, POINTER_UP_EVENTS, noop, listenerOptions );
-    bind( track, POINTER_DOWN_EVENTS, onPointerDown, listenerOptions );
+    bind( track, POINTER_MOVE_EVENTS, noop, SCROLL_LISTENER_OPTIONS );
+    bind( track, POINTER_UP_EVENTS, noop, SCROLL_LISTENER_OPTIONS );
+    bind( track, POINTER_DOWN_EVENTS, onPointerDown, SCROLL_LISTENER_OPTIONS );
     bind( track, 'click', onClick, { capture: true } );
     bind( track, 'dragstart', prevent );
 
@@ -120,7 +120,7 @@ export function Drag( Splide: Splide, Components: Components, options: Options )
     if ( ! disabled ) {
       const { noDrag } = options;
       const isTouch     = isTouchEvent( e );
-      const isDraggable = ! noDrag || ( isHTMLElement( e.target ) && ! matches( e.target, noDrag ) );
+      const isDraggable = ! noDrag || ! matches( e.target, noDrag );
 
       if ( isDraggable && ( isTouch || ! e.button ) ) {
         if ( ! Move.isBusy() ) {
@@ -129,8 +129,8 @@ export function Drag( Splide: Splide, Components: Components, options: Options )
           lastEvent      = null;
           clickPrevented = false;
 
-          bind( target, POINTER_MOVE_EVENTS, onPointerMove, listenerOptions );
-          bind( target, POINTER_UP_EVENTS, onPointerUp, listenerOptions );
+          bind( target, POINTER_MOVE_EVENTS, onPointerMove, SCROLL_LISTENER_OPTIONS );
+          bind( target, POINTER_UP_EVENTS, onPointerUp, SCROLL_LISTENER_OPTIONS );
           Move.cancel();
           Scroll.cancel();
           save( e );

+ 9 - 6
src/js/components/Wheel/Wheel.ts

@@ -1,3 +1,4 @@
+import { SCROLL_LISTENER_OPTIONS } from '../../constants/listener-options';
 import { MOVING } from '../../constants/states';
 import { EventInterface } from '../../constructors';
 import { Splide } from '../../core/Splide/Splide';
@@ -32,7 +33,7 @@ export function Wheel( Splide: Splide, Components: Components, options: Options
    */
   function mount(): void {
     if ( options.wheel ) {
-      bind( Components.Elements.track, 'wheel', onWheel, { passive: false, capture: true } );
+      bind( Components.Elements.track, 'wheel', onWheel, SCROLL_LISTENER_OPTIONS );
     }
   }
 
@@ -42,12 +43,14 @@ export function Wheel( Splide: Splide, Components: Components, options: Options
    * @param e - A WheelEvent object.
    */
   function onWheel( e: WheelEvent ): void {
-    const { deltaY } = e;
+    if ( e.cancelable ) {
+      const { deltaY } = e;
 
-    if ( deltaY ) {
-      const backwards = deltaY < 0;
-      Splide.go( backwards ? '<' : '>' );
-      shouldPrevent( backwards ) && prevent( e );
+      if ( deltaY ) {
+        const backwards = deltaY < 0;
+        Splide.go( backwards ? '<' : '>' );
+        shouldPrevent( backwards ) && prevent( e );
+      }
     }
   }
 

+ 12 - 8
src/js/components/Wheel/test/general.test.ts

@@ -6,22 +6,22 @@ describe( 'Wheel', () => {
     const splide = init( { speed: 0, wheel: true } );
     const { track } = splide.Components.Elements;
 
-    fire( track, 'wheel', { deltaY: 100 } );
+    fireCancelable( track, 'wheel', { deltaY: 100 } );
     expect( splide.index ).toBe( 1 );
 
-    fire( track, 'wheel', { deltaY: 100 } );
+    fireCancelable( track, 'wheel', { deltaY: 100 } );
     expect( splide.index ).toBe( 2 );
 
-    fire( track, 'wheel', { deltaY: 100 } );
+    fireCancelable( track, 'wheel', { deltaY: 100 } );
     expect( splide.index ).toBe( 3 );
 
-    fire( track, 'wheel', { deltaY: -100 } );
+    fireCancelable( track, 'wheel', { deltaY: -100 } );
     expect( splide.index ).toBe( 2 );
 
-    fire( track, 'wheel', { deltaY: -100 } );
+    fireCancelable( track, 'wheel', { deltaY: -100 } );
     expect( splide.index ).toBe( 1 );
 
-    fire( track, 'wheel', { deltaY: -100 } );
+    fireCancelable( track, 'wheel', { deltaY: -100 } );
     expect( splide.index ).toBe( 0 );
   } );
 
@@ -29,11 +29,15 @@ describe( 'Wheel', () => {
     const splide = init( { speed: 0, wheel: false } );
     const { track } = splide.Components.Elements;
 
-    fire( track, 'wheel', { deltaY: 100 } );
+    fireCancelable( track, 'wheel', { deltaY: 100 } );
     expect( splide.index ).toBe( 0 );
 
-    fire( track, 'wheel', { deltaY: 100 } );
+    fireCancelable( track, 'wheel', { deltaY: 100 } );
     expect( splide.index ).toBe( 0 );
   } );
 } );
 
+function fireCancelable( elm: Element | Window, event: string, data: any = {} ): void {
+  fire( elm, event, data, { cancelable: true } );
+}
+

+ 6 - 0
src/js/constants/listener-options.ts

@@ -0,0 +1,6 @@
+/**
+ * AddEventListenerOptions for listeners that may prevent the browser scroll.
+ *
+ * @since 3.4.1
+ */
+export const SCROLL_LISTENER_OPTIONS = { passive: false, capture: true };

+ 9 - 9
src/js/test/php/examples/ttb.php

@@ -19,16 +19,16 @@ $settings = get_settings();
   <script>
     document.addEventListener( 'DOMContentLoaded', function () {
       var splide = new Splide( '#splide01', {
-        width    : 400,
+        width       : 400,
         // type     : 'loop',
-        perPage  : 2,
-        padding  : '3rem',
-        gap      : 5,
-        direction: 'ttb',
-        height   : '90vh',
-        cover    : true,
-        wheel    : true,
-        // releaseWheel: true,
+        perPage     : 2,
+        padding     : '3rem',
+        gap         : 5,
+        direction   : 'ttb',
+        height      : '90vh',
+        cover       : true,
+        wheel       : true,
+        releaseWheel: true,
       } );
 
       splide.mount();

+ 5 - 2
src/js/utils/dom/matches/matches.ts

@@ -1,3 +1,6 @@
+import { isHTMLElement } from '../../type/type';
+
+
 /**
  * Checks if the element can be selected by the provided selector or not.
  *
@@ -6,6 +9,6 @@
  *
  * @return `true` if the selector matches the element, or otherwise `false`.
  */
-export function matches( elm: Element, selector: string ): boolean {
-  return ( elm[ 'msMatchesSelector' ] || elm.matches ).call( elm, selector );
+export function matches( elm: Element | EventTarget, selector: string ): boolean {
+  return isHTMLElement( elm ) && ( elm[ 'msMatchesSelector' ] || elm.matches ).call( elm, selector );
 }

Some files were not shown because too many files changed in this diff