[javascript] Hammer.js를 사용하여 터치 이벤트를 화면 전환에 적용하는 방법은?

27 Nov 2023

javascript

먼저, Hammer.js를 다운로드하여 HTML 파일 안에 포함시킵니다. 이후, 아래 예제 코드를 사용하여 터치 이벤트를 화면 전환에 적용할 수 있습니다.

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="hammer.min.css">
</head>
<body>
  <div id="myElement"></div>

  <script src="hammer.min.js"></script>
  <script>
    var element = document.getElementById('myElement');
    var hammertime = new Hammer(element);

    hammertime.on('swipeleft swiperight', function(ev) {
      if (ev.type === 'swipeleft') {
        // 왼쪽으로 스와이프할 때의 동작
      } else if (ev.type === 'swiperight') {
        // 오른쪽으로 스와이프할 때의 동작
      }
    });
  </script>
</body>
</html>

위의 코드에서는 myElement라는 id를 가진 HTML 요소에 터치 이벤트를 적용하고 있습니다. Hammer() 함수를 사용하여 해당 요소에 Hammer 인스턴스를 생성하고, on() 메서드를 사용하여 터치 제스처를 감지하고 처리하는 로직을 작성하였습니다.

swipeleft 이벤트는 사용자가 왼쪽으로 스와이프할 때 발생하며, swiperight 이벤트는 오른쪽으로 스와이프할 때 발생합니다. 이를 통해 각각의 이벤트에 대한 동작을 작성하면 됩니다.

위의 예제 코드는 Hammer.js를 사용하여 터치 이벤트를 화면 전환에 적용하는 방법을 보여주고 있습니다. 자세한 내용은 Hammer.js 공식 문서를 참조하시기 바랍니다.