Implement #25.

packages/embla-carousel-docs/src/content/pages/api/options.mdx

@@ -216,6 +216,21 @@ Enables momentum scrolling. The duration of the continued scrolling is proportio
 
 ---
 
+### dragThreshold
+
+Type: <BrandPrimaryText>`number`</BrandPrimaryText>  
+Default: <BrandSecondaryText>`10`</BrandSecondaryText>
+
+Drag threshold in pixels. This only affects **when** clicks are fired and not. In contrast to other carousel libraries, it will **not affect when dragging** of the carousel **starts**.
+
+<Admonition type="note">
+  **Note:** Browsers handle touch events differently than mouse events. Browsers
+  won't fire the click event when a touch event includes an accidental slight
+  swipe gesture. This is why this threshold only works for mouse events.
+</Admonition>
+
+---
+
 ### duration
 
 Type: <BrandPrimaryText>`number`</BrandPrimaryText>  

packages/embla-carousel/src/components/DragHandler.ts

@@ -49,6 +49,7 @@ export function DragHandler(
   eventHandler: EventHandlerType,
   percentOfView: PercentOfViewType,
   dragFree: boolean,
+  dragThreshold: number,
   skipSnaps: boolean,
   baseFriction: number,
 ): DragHandlerType {
@@ -147,17 +148,18 @@ export function DragHandler(
   }
 
   function move(evt: PointerEventType): void {
+    const lastScroll = dragTracker.readPoint(evt)
+    const lastCross = dragTracker.readPoint(evt, crossAxis)
+    const diffScroll = deltaAbs(lastScroll, startScroll)
+    const diffCross = deltaAbs(lastCross, startCross)
+
     if (!preventScroll && !isMouse) {
       if (!evt.cancelable) return up(evt)
-      const lastScroll = dragTracker.readPoint(evt)
-      const lastCross = dragTracker.readPoint(evt, crossAxis)
-      const diffScroll = deltaAbs(lastScroll, startScroll)
-      const diffCross = deltaAbs(lastCross, startCross)
       preventScroll = diffScroll > diffCross
       if (!preventScroll) return up(evt)
     }
     const diff = dragTracker.pointerMove(evt)
-    if (diff) preventClick = true
+    if (diffScroll > dragThreshold) preventClick = true
 
     scrollBody.useFriction(0.3).useDuration(1)
     animation.start()

packages/embla-carousel/src/components/Engine.ts

@@ -83,6 +83,7 @@ export function Engine(
     loop,
     duration,
     dragFree,
+    dragThreshold,
     slidesToScroll: groupSlides,
     skipSnaps,
     containScroll,
@@ -227,6 +228,7 @@ export function Engine(
       eventHandler,
       percentOfView,
       dragFree,
+      dragThreshold,
       skipSnaps,
       friction,
     ),

packages/embla-carousel/src/components/Options.ts

@@ -27,6 +27,7 @@ export type OptionsType = CreateOptionsType<{
   direction: DirectionOptionType
   slidesToScroll: SlidesToScrollOptionType
   dragFree: boolean
+  dragThreshold: number
   inViewThreshold: number
   loop: boolean
   skipSnaps: boolean
@@ -47,6 +48,7 @@ export const defaultOptions: OptionsType = {
   slidesToScroll: 1,
   breakpoints: {},
   dragFree: false,
+  dragThreshold: 10,
   inViewThreshold: 0,
   loop: false,
   skipSnaps: false,

playgrounds/embla-carousel-playground-vanilla/src/main.ts

@@ -69,13 +69,23 @@ emblaApi.on('select', togglePrevNextButtonsActive)
 emblaApi.on('init', toggleDotButtonsActive)
 emblaApi.reInit()
 
-let startTime = performance.now()
+// let startTime = performance.now()
 
-emblaApi.on('select', () => {
-  startTime = performance.now()
-})
+// emblaApi.on('select', () => {
+//   startTime = performance.now()
+// })
+
+// emblaApi.on('settle', () => {
+//   const endTime = performance.now()
+//   console.log('settled', endTime - startTime)
+// })
 
-emblaApi.on('settle', () => {
-  const endTime = performance.now()
-  console.log('settled', endTime - startTime)
+emblaApi.slideNodes().forEach((n, i) => {
+  n.addEventListener('click', () => {
+    console.log('Clicked index: ' + (i + 1))
+  })
 })
+
+// document.addEventListener('click', () => {
+//   console.log('Clicked document')
+// })