[javascript] Hammer.js를 사용하여 터치 이벤트를 해당 요소에만 전달하는 방법은?

27 Nov 2023

javascript

먼저, Hammer.js를 다운로드하고 HTML 파일에 포함시킵니다. 다음은 Hammer.js를 사용하여 터치 이벤트를 처리하는 기본 예제입니다.

<!DOCTYPE html>
<html>
<head>
  <title>Hammer.js Example</title>
  <script src="hammer.min.js"></script>
</head>
<body>
  <div id="myElement">
    Swipe, tap, or press the element
  </div>

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

    hammertime.on('swipe tap press', function(event) {
      console.log(event.type);
    });
  </script>
</body>
</html>

위의 예제에서는 myElement라는 ID를 가진 div 요소에 Hammer.js를 적용하고 있습니다. hammertime.on 함수를 사용하여 swipe, tap, press 이벤트를 감지하여 콘솔에 출력하도록 하였습니다.

이제 해당 요소에만 터치 이벤트를 전달하기 위해 Hammer.js의 preventDefault 기능을 사용할 수 있습니다. 이를 사용하면 터치 이벤트가 해당 요소에서만 처리되고 부모 요소로 전파되지 않습니다. 다음은 해당 요소에만 터치 이벤트를 전달하는 방법입니다.

<!DOCTYPE html>
<html>
<head>
  <title>Hammer.js Example</title>
  <script src="hammer.min.js"></script>
</head>
<body>
  <div id="myElement">
    Swipe, tap, or press the element
  </div>
  
  <div>
    This is a parent element
  </div>

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

    hammertime.get('swipe').set({ enable: true, direction: Hammer.DIRECTION_ALL });
    hammertime.on('swipe tap press', function(event) {
      console.log(event.type);
      event.preventDefault();
    });
  </script>
</body>
</html>

위의 예제에서는 hammertime.get('swipe').set({ enable: true, direction: Hammer.DIRECTION_ALL })를 사용하여 swipe 제스처를 사용하고, event.preventDefault()를 사용하여 이벤트의 기본 동작을 차단합니다. 따라서 해당 요소에서만 터치 이벤트가 처리되고, 부모 요소로 전파되지 않게 됩니다.

이렇게 Hammer.js를 사용하여 터치 이벤트를 해당 요소에만 전달할 수 있습니다. Hammer.js의 더 많은 기능과 사용법에 대해서는 공식 문서를 참조하세요.