본문으로 건너뛰기

Prevent Click

preventClickOnDrag 옵션으로 드래그 후 의도치 않게 발생하는 클릭 이벤트를 방지합니다. 패널 안에 링크나 버튼이 있을 때 특히 중요합니다.

패널을 드래그한 뒤 손을 떼보면 클릭 처리 방식의 차이를 확인할 수 있습니다.

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

요약​

주요 옵션​

옵션타입기본값설명
preventClickOnDragbooleantrue드래그 후 클릭 이벤트 방지
preventDefaultOnDragbooleanfalse드래그 중 브라우저 기본 동작 방지

값별 비교​

옵션값동작적합한 상황
preventClickOnDragtrue드래그 후 클릭 이벤트 무시 (기본값)패널 내 링크/버튼이 있는 일반 캐러셀
preventClickOnDragfalse드래그 후에도 클릭 이벤트 발생클릭 이벤트를 직접 관리하는 경우
preventDefaultOnDragtrue드래그 중 텍스트 선택 등 기본 동작 방지텍스트 선택 방지가 필요한 경우
preventDefaultOnDragfalse기본 동작 허용 (기본값)대부분의 일반적인 캐러셀

상세 설명​

preventClickOnDrag 동작 원리​

터치/마우스 드래그가 끝날 때 브라우저는 자연스럽게 click 이벤트를 발생시킵니다. 캐러셀을 드래그해 패널을 넘긴 후 손가락을 뗄 때 패널 안의 링크나 버튼이 의도치 않게 클릭될 수 있습니다.

preventClickOnDrag: true(기본값)로 설정하면 드래그가 발생한 인터랙션에서의 클릭 이벤트를 무시합니다. 단순 탭/클릭(드래그 없음)은 정상적으로 동작합니다.

// 기본값: 드래그 후 클릭 방지 (권장)
const flicking = new Flicking("#el", {
  preventClickOnDrag: true
});

// 드래그 후에도 클릭 허용
const flicking = new Flicking("#el", {
  preventClickOnDrag: false
});

preventDefaultOnDrag​

드래그 중 preventDefault()를 호출해 브라우저 기본 동작(텍스트 선택, 이미지 드래그 등)을 막습니다.

const flicking = new Flicking("#el", {
  preventDefaultOnDrag: true  // 드래그 중 텍스트 선택 불가
});

사용 시나리오​

언제 사용하나요?
  • 패널 안에 링크/버튼이 있는 경우: preventClickOnDrag: true로 설정해 드래그 후 의도치 않은 이동을 방지하세요.
  • 텍스트가 많은 패널: preventDefaultOnDrag: true로 드래그 중 텍스트 선택을 막아 사용성을 향상시킬 수 있습니다.
preventClickOnDrag: false 사용 시

드래그 후에도 클릭이 발생하므로, 짧은 드래그 후 의도치 않은 링크 이동이나 버튼 클릭이 발생할 수 있습니다. 클릭 이벤트를 직접 관리(예: 드래그 거리를 측정해 클릭 여부 판단)할 때만 사용하세요.

관련 링크​

관련 옵션​

관련 데모​