[javascript] Hammer.js를 사용하여 터치 이벤트를 알림 기능에 적용하는 방법은?

27 Nov 2023

javascript

먼저 Hammer.js를 설치해야 합니다. 프로젝트 폴더에서 다음 명령을 실행하세요:

npm install hammerjs

그런 다음, 다음 코드를 HTML 파일에 추가하세요:

<!DOCTYPE html>
<html>
<head>
    <title>Hammer.js Example</title>
</head>
<body>
    <div id="container">
        <h1>터치 이벤트를 알림으로 사용하기</h1>
    </div>

    <script src="https://unpkg.com/hammerjs"></script>
    <script>
        // container 요소의 Hammer 인스턴스를 생성합니다.
        var container = document.getElementById('container');
        var hammer = new Hammer(container);

        // 터치 이벤트 핸들러를 등록합니다.
        hammer.on('tap press swipe', function(e) {
            alert('터치 이벤트 발생: ' + e.type);
        });
    </script>
</body>
</html>

위의 코드를 실행하면, “container”라는 요소에 터치 이벤트 핸들러를 등록하고, 해당 이벤트가 발생할 때마다 알림이 표시됩니다.

이 예제에서는 tap, press, swipe와 같은 몇 가지 터치 이벤트를 처리하도록 설정했습니다. 원하는 터치 이벤트를 추가하거나 수정하여 사용할 수 있습니다.

더 자세한 내용은 Hammer.js 공식 문서를 참조하십시오: Hammer.js Documentation