[javascript] 자바스크립트에서 터치 이벤트를 처리하는 방법은?

12 Dec 2023

javascript

예를 들어, 다음은 간단한 터치 이벤트를 처리하는 자바스크립트 코드입니다:

const element = document.getElementById('touchElement');

element.addEventListener('touchstart', function(e) {
  e.preventDefault(); // 기본 터치 이벤트 동작 차단
  // 터치 시작 시 수행할 작업
});

element.addEventListener('touchmove', function(e) {
  // 터치 이동 시 수행할 작업
});

element.addEventListener('touchend', function(e) {
  // 터치 종료 시 수행할 작업
});

element.addEventListener('touchcancel', function(e) {
  // 터치 이벤트가 취소되었을 때 수행할 작업
});

터치 이벤트를 사용할 때, touchstart 이벤트에서 e.preventDefault()를 호출하여 기본 터치 이벤트 동작을 차단하는 것이 중요합니다. 이렇게 하면 터치 기기에서 스크롤 등의 동작이 없어지고 자바스크립트에서 정의한 이벤트만 처리하게 됩니다.

자바스크립트를 사용하여 터치 이벤트를 다루는 방법이 필요하다면 위의 예시 코드를 참고하세요. 또한, 터치 이벤트에 대한 더 자세한 정보는 Mozilla Developer Network에서 확인할 수 있습니다.