Skip to main content

Prevent Click

The preventClickOnDrag option prevents unintended click events that occur after dragging. This is especially important when panels contain links or buttons.

Try dragging a panel and releasing to see the difference in click handling.

import Flicking from "@egjs/flicking";
import "@egjs/flicking/dist/flicking.css";
import "./styles.css";

// preventClickOnDrag: true (default)
const _flick1 = new Flicking("#flick-prevent", {
  align: "center",
  preventClickOnDrag: true
});

let count1 = 0;
document.querySelectorAll("#flick-prevent .flicking-panel").forEach(el => {
  el.addEventListener("click", () => {
    count1++;
    document.getElementById("count1").textContent = `Click count: ${count1}`;
  });
});

// preventClickOnDrag: false
const _flick2 = new Flicking("#flick-no-prevent", {
  align: "center",
  preventClickOnDrag: false
});

let count2 = 0;
document.querySelectorAll("#flick-no-prevent .flicking-panel").forEach(el => {
  el.addEventListener("click", () => {
    count2++;
    document.getElementById("count2").textContent = `Click count: ${count2}`;
  });
});
Open on CodeSandboxOpen Sandbox

Summary​

Key Options​

OptionTypeDefaultDescription
preventClickOnDragbooleantruePrevent click events after drag
preventDefaultOnDragbooleanfalsePrevent browser default behavior during drag

Comparison by Value​

OptionValueBehaviorSuitable For
preventClickOnDragtrueIgnores click events after drag (default)General carousels with links/buttons in panels
preventClickOnDragfalseClick events fire even after dragWhen managing click events manually
preventDefaultOnDragtruePrevents default behavior like text selection during dragWhen text selection prevention is needed
preventDefaultOnDragfalseAllows default behavior (default)Most general carousels

Details​

How preventClickOnDrag Works​

When a touch/mouse drag ends, the browser naturally fires a click event. When lifting your finger after dragging the carousel to flip panels, links or buttons inside the panel may be clicked unintentionally.

With preventClickOnDrag: true (default), click events from interactions involving a drag are ignored. Simple taps/clicks (without drag) work normally.

// Default: prevent click after drag (recommended)
const flicking = new Flicking("#el", {
  preventClickOnDrag: true
});

// Allow click even after drag
const flicking = new Flicking("#el", {
  preventClickOnDrag: false
});

preventDefaultOnDrag​

Calls preventDefault() during drag to prevent browser default behavior (text selection, image dragging, etc.).

const flicking = new Flicking("#el", {
  preventDefaultOnDrag: true  // Text selection disabled during drag
});

Use Cases​

When to use?
  • When panels contain links/buttons: Set preventClickOnDrag: true to prevent unintended navigation after drag.
  • Text-heavy panels: Set preventDefaultOnDrag: true to prevent text selection during drag for better usability.
Using preventClickOnDrag: false

Since clicks fire even after drag, short drags may trigger unintended link navigation or button clicks. Use only when managing click events manually (e.g., measuring drag distance to determine click intent).

  • inputType: Input device type settings
  • threshold: Minimum drag distance for panel transition