[javascript] Hammer.js를 사용하여 터치 이벤트를 알림 메시지에 적용하는 방법은?
먼저, Hammer.js를 웹 페이지에 추가해야 합니다. 다음 예제 코드를 사용하여 Hammer.js를 로드합니다.
<script src="https://cdn.jsdelivr.net/npm/hammerjs"></script>
Hammer.js를 적용할 알림 메시지 요소를 선택하고 해당 요소를 Hammer 객체로 초기화합니다. 그리고 터치 이벤트를 등록하여 필요한 작업을 수행합니다. 아래 코드는 알림 메시지에 터치 이벤트를 적용하는 예제입니다.
// 알림 메시지 요소 선택
const notificationMessage = document.querySelector('.notification-message');
// Hammer 객체 초기화
const hammer = new Hammer(notificationMessage);
// 터치 이벤트 등록
hammer.on('tap', function(event) {
// 터치 이벤트 발생 시 수행할 작업
// 예: 알림 메시지를 닫기
notificationMessage.style.display = 'none';
});
위 코드에서는 .notification-message
클래스를 가진 요소를 선택하고, 해당 요소를 Hammer 객체로 초기화합니다. 그리고 tap
이벤트를 등록하여 터치 이벤트가 발생했을 때 알림 메시지를 닫는 작업을 수행합니다.
다른 터치 이벤트 종류인 swipe
, pan
, press
등을 사용하여 다양한 동작을 구현할 수 있습니다. Hammer.js의 문서를 참조하여 자세한 사용법을 확인하세요.
참고 문서: