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

12 Dec 2023

javascript

자바스크립트에서 멀티터치 이벤트를 처리하기 위해서는 touchstart, touchmove, touchend와 같은 터치 이벤트들을 활용할 수 있습니다.

다중 터치 이벤트를 다뤄야 하는 경우, TouchEvent 객체를 통해 여러 터치 지점의 정보에 접근할 수 있습니다. 주요 속성으로는 touches, targetTouches, changedTouches 등이 있습니다.

아래는 간단한 예제코드입니다.

// 멀티터치 이벤트 핸들링 예제

// 터치 시작 시
function handleTouchStart(event) {
  event.preventDefault();
  var touches = event.touches;
  for (var i = 0; i < touches.length; i++) {
    // 각 터치 지점에 대한 처리 로직
    console.log("터치 시작: ", touches[i].pageX, touches[i].pageY);
  }
}

// 터치 이동 시
function handleTouchMove(event) {
  event.preventDefault();
  var touches = event.touches;
  for (var i = 0; i < touches.length; i++) {
    // 각 터치 지점에 대한 처리 로직
    console.log("터치 이동: ", touches[i].pageX, touches[i].pageY);
  }
}

// 터치 종료 시
function handleTouchEnd(event) {
  event.preventDefault();
  var touches = event.changedTouches;
  for (var i = 0; i < touches.length; i++) {
    // 종료된 터치 지점에 대한 처리 로직
    console.log("터치 종료: ", touches[i].pageX, touches[i].pageY);
  }
}

// 이벤트 처리기 등록
var targetElement = document.getElementById("target");  // 대상 엘리먼트 선택
targetElement.addEventListener("touchstart", handleTouchStart, false);
targetElement.addEventListener("touchmove", handleTouchMove, false);
targetElement.addEventListener("touchend", handleTouchEnd, false);

이 예제는 간단히 touchstart, touchmove, touchend 이벤트를 핸들링하고, 각각의 이벤트에서 여러 터치 지점의 정보에 접근하여 처리하는 방법을 보여줍니다.

더 복잡한 상황에서는 터치 이벤트의 상세한 특성과 관련 메서드를 확인할 수 있는 자바스크립트 공식 문서(https://developer.mozilla.org/ko/docs/Web/API/TouchEvent)를 참고하는 것이 도움이 될 수 있습니다.