Prevent propagation of a click event during drag/swipe(#6).

dist/js/splide.js

@@ -1,6 +1,6 @@
 /*!
  * Splide.js
- * Version  : 1.2.4
+ * Version  : 1.2.5
  * License  : MIT
  * Copyright: 2019 Naotoshi Fujita
  */
@@ -860,21 +860,19 @@ function removeAttribute(elm, name) {
  * @param {Element|Window}  elm     - An element or window object.
  * @param {string}          event   - An event name or event names separated with space.
  * @param {function}        handler - Callback function.
- * @param {boolean}         passive - Optional. Set false if the event is not passive.
+ * @param {Object}          options - Optional. Options.
  *
  * @return {function[]} - Functions to stop subscription.
  */
 
-function subscribe(elm, event, handler, passive) {
-  if (passive === void 0) {
-    passive = true;
+function subscribe(elm, event, handler, options) {
+  if (options === void 0) {
+    options = {};
   }
 
   if (elm) {
     return event.split(' ').map(function (e) {
-      elm.addEventListener(e, handler, {
-        passive: passive
-      });
+      elm.addEventListener(e, handler, options);
       return function () {
         return elm.removeEventListener(e, handler);
       };
@@ -3580,13 +3578,17 @@ var SWIPE_THRESHOLD = 150;
     mount: function mount() {
       var list = Components.Elements.list;
       subscribe(list, 'touchstart mousedown', start);
-      subscribe(list, 'touchmove mousemove', move, false);
-      subscribe(list, 'touchend touchcancel mouseleave mouseup dragend', end); // Prevent dragging an image itself.
+      subscribe(list, 'touchmove mousemove', move, {
+        passive: false
+      });
+      subscribe(list, 'touchend touchcancel mouseleave mouseup dragend', end); // Prevent dragging an image or anchor itself.
 
-      each(list.getElementsByTagName('img'), function (img) {
-        subscribe(img, 'dragstart', function (e) {
+      each(list.querySelectorAll('img, a'), function (elm) {
+        subscribe(elm, 'dragstart', function (e) {
           e.preventDefault();
-        }, false);
+        }, {
+          passive: false
+        });
       });
     }
   };
@@ -3784,25 +3786,18 @@ var SWIPE_THRESHOLD = 150;
 
   return Drag;
 });
-// CONCATENATED MODULE: ./src/js/components/links/index.js
+// CONCATENATED MODULE: ./src/js/components/click/index.js
 /**
- * The component for disabling a link while a slider is dragged.
+ * The component for handling a click event.
  *
  * @author    Naotoshi Fujita
  * @copyright Naotoshi Fujita. All rights reserved.
  */
 
 
-
-/**
- * The name for a data attribute.
- *
- * @type {string}
- */
-
-var HREF_DATA_NAME = 'data-splide-href';
 /**
- * The component for disabling a link while a slider is dragged.
+ * The component for handling a click event.
+ * Click should be disabled during drag/swipe.
  *
  * @param {Splide} Splide     - A Splide instance.
  * @param {Object} Components - An object containing components.
@@ -3810,20 +3805,20 @@ var HREF_DATA_NAME = 'data-splide-href';
  * @return {Object} - The component object.
  */
 
-/* harmony default export */ var components_links = (function (Splide, Components) {
+/* harmony default export */ var components_click = (function (Splide, Components) {
   /**
-   * Hold all anchor elements under the list.
+   * Whether click is disabled or not.
    *
-   * @type {Array}
+   * @type {boolean}
    */
-  var links = [];
+  var disabled = false;
   /**
-   * Links component object.
+   * Click component object.
    *
    * @type {Object}
    */
 
-  var Links = {
+  var Click = {
     /**
      * Mount only when the drag is activated and the slide type is not "fade".
      *
@@ -3835,43 +3830,31 @@ var HREF_DATA_NAME = 'data-splide-href';
      * Called when the component is mounted.
      */
     mount: function mount() {
-      links = values(Components.Elements.list.getElementsByTagName('a'));
-      links.forEach(function (link) {
-        setAttribute(link, HREF_DATA_NAME, getAttribute(link, 'href'));
+      subscribe(Components.Elements.track, 'click', click, {
+        capture: true
+      });
+      Splide.on('drag', function () {
+        disabled = true;
+      }).on('moved', function () {
+        disabled = false;
       });
-      bind();
     }
   };
   /**
-   * Listen some events.
-   */
-
-  function bind() {
-    Splide.on('drag', disable);
-    Splide.on('moved', enable);
-  }
-  /**
-   * Disable links by removing href attributes.
-   */
-
-
-  function disable() {
-    links.forEach(function (link) {
-      return removeAttribute(link, 'href');
-    });
-  }
-  /**
-   * Enable links by restoring href attributes.
+   * Called when a track element is clicked.
+   *
+   * @param {Event} e - A click event.
    */
 
-
-  function enable() {
-    links.forEach(function (link) {
-      return setAttribute(link, 'href', getAttribute(link, HREF_DATA_NAME));
-    });
+  function click(e) {
+    if (disabled) {
+      e.preventDefault();
+      e.stopPropagation();
+      e.stopImmediatePropagation();
+    }
   }
 
-  return Links;
+  return Click;
 });
 // CONCATENATED MODULE: ./src/js/components/autoplay/index.js
 /**
@@ -5165,7 +5148,9 @@ var TRIGGER_KEYS = [' ', 'Enter', 'Spacebar'];
           e.preventDefault();
           moveSibling(Slide.index);
         }
-      }, false);
+      }, {
+        passive: false
+      });
     });
   }
 
@@ -5322,7 +5307,7 @@ var COMPLETE = {
   Clones: components_clones,
   Layout: layout,
   Drag: drag,
-  Links: components_links,
+  Click: components_click,
   Autoplay: components_autoplay,
   Cover: components_cover,
   Arrows: components_arrows,

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@splidejs/splide",
-  "version": "1.2.4",
+  "version": "1.2.5",
   "description": "Splide is a lightweight and powerful slider without any dependencies.",
   "author": "Naotoshi Fujita",
   "license": "MIT",

src/js/components/click/index.js

@@ -0,0 +1,68 @@
+/**
+ * The component for handling a click event.
+ *
+ * @author    Naotoshi Fujita
+ * @copyright Naotoshi Fujita. All rights reserved.
+ */
+
+import { FADE } from "../../constants/types";
+import { subscribe } from "../../utils/dom";
+
+
+/**
+ * The component for handling a click event.
+ * Click should be disabled during drag/swipe.
+ *
+ * @param {Splide} Splide     - A Splide instance.
+ * @param {Object} Components - An object containing components.
+ *
+ * @return {Object} - The component object.
+ */
+export default ( Splide, Components ) => {
+	/**
+	 * Whether click is disabled or not.
+	 *
+	 * @type {boolean}
+	 */
+	let disabled = false;
+
+	/**
+	 * Click component object.
+	 *
+	 * @type {Object}
+	 */
+	const Click = {
+		/**
+		 * Mount only when the drag is activated and the slide type is not "fade".
+		 *
+		 * @type {boolean}
+		 */
+		required: Splide.options.drag && ! Splide.is( FADE ),
+
+		/**
+		 * Called when the component is mounted.
+		 */
+		mount() {
+			subscribe( Components.Elements.track, 'click', click, { capture: true } );
+
+			Splide
+				.on( 'drag', () => { disabled = true } )
+				.on( 'moved', () => { disabled = false } );
+		},
+	};
+
+	/**
+	 * Called when a track element is clicked.
+	 *
+	 * @param {Event} e - A click event.
+	 */
+	function click( e ) {
+		if ( disabled ) {
+			e.preventDefault();
+			e.stopPropagation();
+			e.stopImmediatePropagation();
+		}
+	}
+
+	return Click;
+}

src/js/components/drag/index.js

@@ -129,12 +129,12 @@ export default ( Splide, Components ) => {
 			const list = Components.Elements.list;
 
 			subscribe( list, 'touchstart mousedown', start );
-			subscribe( list, 'touchmove mousemove', move, false );
+			subscribe( list, 'touchmove mousemove', move, { passive: false } );
 			subscribe( list, 'touchend touchcancel mouseleave mouseup dragend', end );
 
-			// Prevent dragging an image itself.
-			each( list.getElementsByTagName( 'img' ), img => {
-				subscribe( img, 'dragstart', e => { e.preventDefault() }, false );
+			// Prevent dragging an image or anchor itself.
+			each( list.querySelectorAll( 'img, a' ), elm => {
+				subscribe( elm, 'dragstart', e => { e.preventDefault() }, { passive: false } );
 			} );
 		},
 	};

src/js/components/index.js

@@ -13,7 +13,7 @@ import Track       from './track';
 import Clones      from './clones';
 import Layout      from './layout';
 import Drag        from './drag';
-import Links       from './links';
+import Click       from './click';
 import Autoplay    from './autoplay';
 import Cover       from './cover';
 import Arrows      from './arrows';
@@ -33,7 +33,7 @@ export const COMPLETE = {
 	Clones,
 	Layout,
 	Drag,
-	Links,
+	Click,
 	Autoplay,
 	Cover,
 	Arrows,

src/js/components/links/index.js

@@ -1,82 +0,0 @@
-/**
- * The component for disabling a link while a slider is dragged.
- *
- * @author    Naotoshi Fujita
- * @copyright Naotoshi Fujita. All rights reserved.
- */
-
-import { values } from "../../utils/object";
-import { removeAttribute, setAttribute, getAttribute } from "../../utils/dom";
-import { FADE } from "../../constants/types";
-
-/**
- * The name for a data attribute.
- *
- * @type {string}
- */
-const HREF_DATA_NAME = 'data-splide-href';
-
-
-/**
- * The component for disabling a link while a slider is dragged.
- *
- * @param {Splide} Splide     - A Splide instance.
- * @param {Object} Components - An object containing components.
- *
- * @return {Object} - The component object.
- */
-export default ( Splide, Components ) => {
-	/**
-	 * Hold all anchor elements under the list.
-	 *
-	 * @type {Array}
-	 */
-	let links = [];
-
-	/**
-	 * Links component object.
-	 *
-	 * @type {Object}
-	 */
-	const Links = {
-		/**
-		 * Mount only when the drag is activated and the slide type is not "fade".
-		 *
-		 * @type {boolean}
-		 */
-		required: Splide.options.drag && ! Splide.is( FADE ),
-
-		/**
-		 * Called when the component is mounted.
-		 */
-		mount() {
-			links = values( Components.Elements.list.getElementsByTagName( 'a' ) );
-			links.forEach( link => { setAttribute( link, HREF_DATA_NAME, getAttribute( link, 'href' ) ) } );
-			bind();
-		},
-	};
-
-	/**
-	 * Listen some events.
-	 */
-	function bind() {
-		Splide.on( 'drag', disable );
-		Splide.on( 'moved', enable );
-	}
-
-	/**
-	 * Disable links by removing href attributes.
-	 */
-	function disable() {
-		links.forEach( link => removeAttribute( link, 'href' ) );
-	}
-
-	/**
-	 * Enable links by restoring href attributes.
-	 */
-	function enable() {
-		links.forEach( link => setAttribute( link, 'href', getAttribute( link, HREF_DATA_NAME ) ) );
-	}
-
-	return Links;
-}

src/js/components/sync/index.js

@@ -138,7 +138,7 @@ export default ( Splide ) => {
 					e.preventDefault();
 					moveSibling( Slide.index );
 				}
-			}, false );
+			}, { passive: false } );
 		} );
 	}
 

src/js/utils/dom.js

@@ -160,14 +160,14 @@ export function removeAttribute( elm, name ) {
  * @param {Element|Window}  elm     - An element or window object.
  * @param {string}          event   - An event name or event names separated with space.
  * @param {function}        handler - Callback function.
- * @param {boolean}         passive - Optional. Set false if the event is not passive.
+ * @param {Object}          options - Optional. Options.
  *
  * @return {function[]} - Functions to stop subscription.
  */
-export function subscribe( elm, event, handler, passive = true ) {
+export function subscribe( elm, event, handler, options = {} ) {
 	if ( elm ) {
 		return event.split( ' ' ).map( e => {
-			elm.addEventListener( e, handler, { passive } );
+			elm.addEventListener( e, handler, options );
 			return () => elm.removeEventListener( e, handler );
 		} );
 	}