[javascript] Hammer.js를 사용하여 다중 터치 제스처를 단일 기능에 모음하는 방법은?

27 Nov 2023

javascript

다음은 Hammer.js를 사용하여 다중 터치 제스처를 단일 기능에 모으는 방법입니다.

먼저, Hammer.js 라이브러리를 HTML 문서의 <head> 부분에 추가합니다.

<script src="https://hammerjs.github.io/dist/hammer.min.js"></script>

그런 다음, 다음과 같이 JavaScript 코드를 작성하여 다중 터치 제스처 처리를 설정합니다.

// 대상 요소를 선택합니다.
var element = document.getElementById('myElement');

// Hammer 인스턴스를 생성합니다.
var hammer = new Hammer(element);

// 다중 터치 제스처를 설정합니다.
hammer.get('pinch').set({ enable: true });
hammer.get('rotate').set({ enable: true });
hammer.get('swipe').set({ enable: true });

// 터치 이벤트 핸들러를 설정합니다.
hammer.on('pinch rotate swipe', function(event) {
  // 제스처 이벤트 처리를 수행합니다.
  if (event.type === 'pinch') {
    // pinch 제스처 처리
    console.log('pinch gesture detected');
  } else if (event.type === 'rotate') {
    // rotate 제스처 처리
    console.log('rotate gesture detected');
  } else if (event.type === 'swipe') {
    // swipe 제스처 처리
    console.log('swipe gesture detected');
  }
});

위의 코드에서, myElement는 터치 이벤트를 처리할 HTML 요소의 ID입니다. 해당 요소에서 발생하는 다중 터치 제스처(pinch, rotate, swipe) 이벤트를 감지하고 처리하는 핸들러를 등록합니다.

이제 다중 터치 제스처가 발생하면 해당 이벤트 핸들러가 실행됩니다.

참고 자료:

Hammer.js 공식 문서