[javascript] 터치 이벤트를 사용하여 특정 위치의 터치 여부를 확인하는 방법은?

12 Dec 2023

javascript

이벤트 리스너 추가: 터치 이벤트를 감지하기 위해 해당 요소에 이벤트 리스너를 추가합니다.

const element = document.getElementById("targetElement");

element.addEventListener("touchstart", function(event) {
  // 터치가 시작된 위치에서 실행할 작업
});

터치 이벤트 핸들링: 터치가 시작되는 위치를 확인하고 작업을 수행합니다.

element.addEventListener("touchstart", function(event) {
  const touchX = event.touches[0].clientX;
  const touchY = event.touches[0].clientY;

  // 특정 위치에서의 터치 여부 확인
  if (touchX > 100 && touchX < 200 && touchY > 100 && touchY < 200) {
    // 원하는 작업 실행
  }
});

이렇게 하면 해당 요소에서 특정 위치의 터치 여부를 확인할 수 있습니다. 또한, touchmove 및 touchend 이벤트도 활용하여 터치 동작을 계속하여 추적할 수 있습니다.

참고 문헌 :

MDN Web Docs - Touch events