[javascript] Hammer.js를 사용하여 터치 인식 기능을 특정한 요소에만 적용하는 방법은?

27 Nov 2023

javascript

먼저, Hammer.js를 HTML 파일에 추가하고 터치 인식 기능을 적용할 요소를 선택해야 합니다. 아래는 예시 코드입니다.

<!DOCTYPE html>
<html>
  <head>
    <script src="hammer.min.js"></script>
    <style>
      #myElement {
        width: 200px;
        height: 200px;
        background-color: yellow;
      }
    </style>
  </head>
  <body>
    <div id="myElement"></div>

    <script>
      var myElement = document.getElementById('myElement');
      var hammer = new Hammer(myElement);

      // 터치 이벤트에 반응하는 코드를 추가할 수 있습니다.

      hammer.on('tap', function(event) {
        console.log('Tap event detected!');
      });
    </script>
  </body>
</html>

위의 예시 코드에서는 id가 “myElement”인 div 요소를 선택하고, Hammer 객체를 생성하여 해당 요소에 터치 이벤트를 적용합니다. 이제 터치 이벤트에 대한 반응을 정의할 수 있습니다.

예를 들어, 위의 코드에서는 “tap” 이벤트가 발생했을 때 콘솔에 메시지를 출력하도록 설정하였습니다. 여기서 “tap” 이벤트는 요소를 탭할 때 발생하는 이벤트입니다.

이렇게 특정 요소에만 Hammer.js를 사용하여 터치 인식 기능을 적용할 수 있습니다. Hammer.js는 다양한 터치 제스처를 인식할 수 있으므로 필요에 따라 다른 이벤트를 사용할 수도 있습니다.

참고 자료: