[책] 자바스크립트 코드 레시피 278 - 109일차

터치 이벤트 처리하기

• 스마트폰에서 화면 터치에 반응하는 처리를 하고 싶을 때

구문

touchstart 터치 시작 시점
touchmove 터치 포인트를 움직이는 시점
touchend 터치 종료 시점

실습

터치 가능 디바이스는 시작, 이동, 종료의 터치 이벤트가 발생합니다. 터치 이벤트를 감지하여 로그로 출력하는 샘플을 확인합니다.

index.html

<div class="box">
  <p>터치가 가능한 디바이스에서 확인합니다.</p>
  <div class="log"></div>
</div>
<div style="height: 10000px"></div> <!-- 터치 포인트를 움직이는 높이 설정 -->

---

script.js

const targetBox = document.querySelector('.box');
const logArea = document.querySelector('.log');

targetBox.addEventListener('touchstart', () => {
  logArea.innerHTML = '터치 시작';
});

targetBox.addEventListener('touchmove', () => {
  logArea.innerHTML = '터치 위치 이동';
});

targetBox.addEventListener('touchend', () => {
  logArea.innerHTML = '터치 종료';
});

터치 이벤트 정보 확인하기

• 마우스 움직임에 따라 작업을 처리하고 싶을 때
• 터치에 반응하는 요소를 처리하고 싶을 때

구문

event.changedTouches 터치 정보(Touch 객체) 배열

---

터치정보.clientX 브라우저 좌측 상단 기준 X 좌표
터치정보.clientY 브라우저 좌측 상단 기준 Y 좌표
터치정보.offsetX 요소 좌측 상단 기준 X 좌표
터치정보.offsetY 요소 좌측 상단 기준 Y 좌표
터치정보.pageX 페이지 좌측 상단 기준 X 좌표
터치정보.pageY 페이지 좌측 상단 기준 Y 좌표
터치정보.screenX 디바이스 좌측 상단 기준 X 좌표
터치정보.screenY 디바이스 좌측 상단 기준 Y 좌표

설명

마우스와 달리 터치는 멀티 터치(동시 터치)가 가능합니다. 멀티 터치는 이벤트가 동시에 발생하기 때문에 터치 이벤트가 동시에 작동하게 되며, event.changedTouches를 사용하여 각각의 터치 정보에 액세스할 수 있습니다.

실습 1

const box = document.querySelector('.box');
box.addEventListener('touchstart', (event) => {
    console.log(event.changedTouches);
});

실습 2

index.html

<div class="box">
  <p>터치가 가능한 디바이스에서 확인합니다.</p>
  <div class="log"></div>
</div>
<div style="height: 10000px"></div> <!-- 터치 포인트를 움직이는 높이 설정 -->

---

script.js

const targetBox = document.querySelector('.box');
const log = document.querySelector('.log');

targetBox.addEventListener('touchmove', (event) => {
    const touch = event.changedTouches;
    console.log(`${touch[0].pageX.toFixed(2)}` + ' / ' + `${touch[0].pageY.toFixed(2)}`);
});