[Slick] slick 드래그 중일 때 클릭방지

프로젝트에서 슬라이더 라이브러리로 swiper를 사용하고 있었는데 

새로 추가되는 슬라이더가 정상적으로 작동하지 않아서 slick을 사용해보았다.

codepen에서는 swiper도 잘되는데 프로젝트에서 안됨..ㅜ

 

slick으로 작업을 다하고 스와이프를 해보니 드래그 할때마다 클릭이벤트가 발생하는 이슈가 있다.

(slick에서 스와이프할때 click 되는건 꾸준히 제기됐던 문제라고 한다)

 

아래 코드를 넣어줬더니 생각보다 금방 해결 되었다.

 

CSS

.is-dragging {
	pointer-events: none;
}

 

function blockWhileDragging(isDragging) {
	let slides = document.getElementsByClassName("slick-slide");
    
	if (isDragging) {
    	for (let i = 0; i < slides.length; i++) {
        	slides[i].classList.add("is-dragging"); // is-dragging 클래스 추가
 		}
	} else {
    	for (let i = 0; i < slides.length; i++) {
        	slides[i].classList.remove("is-dragging"); // is-dragging 클래스 제거
    	}
	}
}

// mousedown 여부를 판단할 변수
let isMouseDown = false;

// mousedown 이벤트에서 isMouseDown을 true로 변환
document.addEventListener("mousedown", () => {
	isMouseDown = true;
});

// mousemove 이벤트에서 isMouseDown을 판단해 blockWhileDragging 함수 실행
document.addEventListener("mousemove", () => {
	if (isMouseDown) {
    	blockWhileDragging(true);
    } else {
    	blockWhileDragging(false);
    }
});

// mouseup 이벤트에서 mousedown 이전 상태로 초기화
document.addEventListener("mouseup", () => {
	isMouseDown = false;
    blockWhileDragging(false);
});

 

코드를 추가하면 드래그할 때는 클릭이 되지 않는다. 굿

 

[JS] Slick Slider 드래그 중일 때 클릭 방지