[JavaScript] 자바스크립트 터치 이벤트 정보 확인하기

119_자바스크립트 터치 이벤트 정보 확인하기

[적용]

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

---

[문법1]

속성	내용	타입
event.changedTouches	터치 정보(Thoch 객체) 배열	배열

 

[문법2]

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

 

마우스와 달리 터치는 멀티 터치(동시 터치)가 가능하다.

멀티 터치는 이벤트가 동시에 발생하기 때문에 터치 이벤트가 동시에 작동하게 되며,

event.changedTouches를 사용하여 각각의 터치 정보에 엑세스할 수 있다.

 

const box = document.querySelector('.box');
box.addEventListener('touchstart', (event) => {
	// 터치 정보 리스트
    console.log(event.changedTouches);
});

---

[예시]

event.changedTouches는 터치 정보(Thoch 객체)를 배열로 가지며,인덱스 0부터 정보가 순서대로 들어 있다. pageX, pageY 속성으로 터치 위치의 확인이 가능하다.각 터치 이벤트에 대해 좌표를 출력하는 샘플을 확인해 보자.

 

HTML                                                                                                                                                              index.html

<p class="log"></p>

JavaScript                                                                                                                                                          main.js

// 터치 영역
const targetBox = document.querySelector('.box');
// 로그
const log = document.querySelector('.log');

// 화면의 터치 위치 변경 시 로그 표시
targetBox.addEventListener('touchmove', () => {
	const touch = event.changedTouches;
    
    log.innerHTML = `
    	${touch[0].pageX.toFixed(2)}<br>
        $[touch[0].pageY.toFixed(2)}
    `;
});

 

 

---

 

 

 

 

 

참조 :
실무에 바로 적용하는 자바스크립트 코드레시피 278
아케다 야스노부, 카노 타케시 지음 / 이춘혁 옮김