Swiper 내부 영역 클릭 시, 의도하지 않은 슬라이드 이벤트가 발생하는 현상 해결하기

How to Resolve Unintended Slide Events When Clicking Inside a Swiper Slide

 

 

이번 포스팅에서는 Swiper 캐러셀 내부의 특정 영역을 클릭 했을 때, 사용자가 의도하지 않은 스와이퍼 슬라이드 이벤트가 발생되는 현상을 해결하는 방법을 다뤄보겠습니다.

이 문제를 예를 들어 설명하자면 스와이퍼에 동영상 영역이 있고 그 동영상을 제어하는 재생/정지 버튼을 만들었는데, 그 버튼을 클릭했을 때 의도하지 않게 다음 슬라이드로 넘어가는 현상과 같은 문제입니다.

 

그럼 해결 방법을 알아보기 전, 해결에 사용되는 개념을 간단히 정리해보겠습니다.

 

1. event.stopPropagation()

event.stopPropagation() 메서드는 이벤트가 캡처링/버블링 단계에서 더이상 전파되지 않도록 방지하는 역할을 합니다. 이렇게 설명을 들으면 조금 어려울 수 있는데요. 조금 더 자세히 설명하자면 본인의 상위, 혹은 하위 요소에 걸린 이벤트에 대한 내용이 본인에게 까지 적용되지 않도록 하는 것을 뜻합니다.

 

예를 들어 아래 Codepen에는 div로 카드가 만들어져 있고 그 안에 버튼이 하나씩 있습니다. div를 클릭하면 카드가 떠올랐다 내려가는 효과를 주었는데요. 아무것도 방지하지 않은 기본 상태에서는 div 안에 있는 요소인 button을 클릭해도 동일한 효과가 나타납니다. 하지만 우측의 카드는 e.stopPropagation() 메서드로 버튼에게 버블링 방지 처리를 해주었기 때문에 div 클릭을 하면 애니메이션이 일어나지만, button을 클릭했을 때에는 이벤트가 동작하지 않습니다.

 

See the Pen 버블링, 캡쳐링 예시 by newstar (@newstar_) on CodePen.

 

이 때 주의할 점은 이벤트 전파를 방지해도 이벤트의 기본 동작은 실행된다는 점입니다. 그러므로 빈 a 링크를 클릭 했을 때 브라우저 스크롤이 상단으로 튀는 현상과 같은 기본 동작을 방지하고 싶다면 stopPropagation()이 아닌 preventDefault() 메서드를 사용해야 합니다.

 

2. 문제 해결하기

2.1. 스와이퍼 마우스 드래그로 슬라이드하는 기능 Off 하기

먼저 클릭했을 때 스와이퍼 슬라이드가 일어나는 원인을 파악해야 합니다. 그 원인은 스와이퍼를 마우스로 드래그하는 기능의 감도가 너무 높아서, 영역을 클릭할 때 조금이라도 마우스를 드래그할 경우, 슬라이드하는 현상이 일어나는 것입니다. 간단히 해결하려면 이 드래그 시 슬라이드 되는 기능을 False 처리하여 해결할 수 있습니다.

const swiper = new Swiper('.swiper', {
  allowTouchMove: false,
});

 

2.2. e.Propagation() 메서드로 특정 요소에 버블링 방지 처리하기

하지만 위 2.1. 의 방법은 근본적인 해결법이 아닙니다. 경우에 따라 마우스 드래그로 슬라이드하는 기능을 꼭 사용해야 하는 경우도 있기 때문입니다. 이러한 경우에는 e.stopPropagation() 메서드로 원하는 클릭 영역의 버블링을 방지시키는 방법을 사용할 수 있습니다.

 

버블링 방지를 하기 위해선 스와이퍼가 마우스 드래그로 슬라이드 되는 기능이 어떤 이벤트에 걸려있는지 파악해야 하는데요. 이건 크롬 개발자 도구를 통해 확인할 수 있습니다.

 

스와이퍼 영역에 우측 클릭하여 개발자 도구를 연 후, 개발자 도구의 우측 패널에서 이벤트 리스너 탭을 클릭하면 해당 영역에 걸려있는 이벤트들의 목록을 확인할 수 있습니다.

 

위 이벤트 중 마우스 드래그 기능을 일으키는 이벤트는 테스트 해본 결과 pointerdown, pointerup인 것으로 확인하였습니다. 이벤트까지 확인하였으니 아래와 같이 우리가 원하는 요소에 pointerdown, pointerup 이벤트가 일어날 경우 버블링 방지처리를 해주면 됩니다.

 

$('button').on('pointerdown pointerup', function(e) {
	e.stopPropagation();
});

 

See the Pen How to Resolve Unintended Slide Events When Clicking Inside a Swiper Slide by newstar (@newstar_) on CodePen.

 

이번 포스팅에서는 이렇게 Swiper 내부 영역에 있는 특정 요소 클릭 시, 의도하지 않은 슬라이드 이벤트가 발생하는 현상을 해결해보았습니다. 도움이 되셨길 바랍니다.

 

감사합니다.

 

3. 참고

• MDN - https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation