소개

Hammer.js는 웹 애플리케이션에서 터치와 관련된 다양한 이벤트를 처리할 수 있는 JavaScript 라이브러리입니다. 이 라이브러리는 터치, 드래그, 스와이프 등의 터치 동작을 감지하고 처리하는 기능을 제공합니다.

터치 종류

Hammer.js는 다양한 터치 동작을 지원합니다. 각 터치 동작에 대해 어떤 이벤트를 감지할 수 있는지 알아보겠습니다.

1. tap: 사용자가 화면을 눌렀다 뗐을 때 발생하는 이벤트입니다. 클릭과 유사한 동작을 수행할 때 사용될 수 있습니다.

2. doubletap: 사용자가 빠르게 두 번 눌렀을 때 발생하는 이벤트입니다. 더블 클릭과 유사한 동작을 수행할 때 사용될 수 있습니다.

3. press: 사용자가 화면을 길게 눌렀을 때 발생하는 이벤트입니다. 롱 프레스와 유사한 동작을 수행할 때 사용될 수 있습니다.

4. swipe: 사용자가 화면을 특정 방향으로 빠르게 스와이프했을 때 발생하는 이벤트입니다. 여러 방향의 스와이프 동작을 감지할 수 있습니다.

5. pan: 사용자가 화면을 특정 방향으로 드래그하는 동안 발생하는 이벤트입니다. 드래그 동작과 관련된 기능을 구현할 때 사용될 수 있습니다.

6. pinch: 사용자가 두 손가락으로 화면을 확대 또는 축소할 때 발생하는 이벤트입니다. 확대/축소와 관련된 기능을 구현할 때 사용될 수 있습니다.

사용 예시

Hammer.js를 사용하여 터치 동작을 처리하는 예시를 제시합니다.

var element = document.getElementById('myelement');
var hammertime = new Hammer(element);

hammertime.on('swipe', function(event) {
  console.log('Swipe detected!');
});

hammertime.on('pan', function(event) {
  console.log('Pan detected!');
});

hammertime.on('pinch', function(event) {
  console.log('Pinch detected!');
});

위 예시는 myelement라는 id를 가진 요소에서 스와이프, 팬, 핀치 동작을 감지하여 콘솔에 각각의 메시지를 출력하는 코드입니다.

참고 자료

• Hammer.js 공식 문서
• GitHub 저장소