[javascript] Hammer.js를 사용하여 스와이프한 방향을 감지하는 방법은?

27 Nov 2023

javascript

먼저, Hammer.js를 다운로드하고 HTML 파일에 스크립트를 포함시킵니다. 다음으로, 스와이프 이벤트를 감지하고 처리할 요소를 선택합니다. 예를 들어, swipe-area라는 id를 가진 요소를 사용하겠습니다.

<div id="swipe-area"></div>

<script src="https://hammerjs.github.io/dist/hammer.min.js"></script>
<script>
  var swipeArea = document.getElementById('swipe-area');
  var hammertime = new Hammer(swipeArea);

  hammertime.on('swipe', function (event) {
    if (event.direction === Hammer.DIRECTION_LEFT) {
      console.log('왼쪽으로 스와이프했습니다.');
    } else if (event.direction === Hammer.DIRECTION_RIGHT) {
      console.log('오른쪽으로 스와이프했습니다.');
    } else if (event.direction === Hammer.DIRECTION_UP) {
      console.log('위로 스와이프했습니다.');
    } else if (event.direction === Hammer.DIRECTION_DOWN) {
      console.log('아래로 스와이프했습니다.');
    }
  });
</script>

이 코드는 swipe-area 요소에서 스와이프 이벤트를 감지하고, 이벤트 객체의 direction 속성을 사용하여 스와이프한 방향을 확인합니다. Hammer.DIRECTION_LEFT, Hammer.DIRECTION_RIGHT, Hammer.DIRECTION_UP, Hammer.DIRECTION_DOWN 상수를 사용하여 각각 왼쪽, 오른쪽, 위쪽, 아래쪽 스와이프를 확인합니다.

이제 swipe-area 요소를 스와이프하면 콘솔에 해당 방향이 출력됩니다. 이를 원하는 대로 사용자 인터페이스에 적용하여 특정 기능을 활성화하거나 애니메이션을 수행할 수 있습니다.

자세한 내용은 Hammer.js 공식 문서를 참조하시기 바랍니다.