HTML DOM의 TouchEvent touches 속성은 터치 표면(스크린)에서 발생한 모든 접촉 지점(contact points)에 대한 정보를 담고 있는 TouchList 객체를 반환합니다. 이 속성을 활용하면 현재 화면에 닿아 있는 손가락의 개수나 각 터치의 위치 등을 손쉽게 파악할 수 있습니다.
touches 속성의 특징
주목할 점은, 터치 이벤트가 지정된 노드 또는 그 자식 노드에서 발생했다면, 이후의 터치들이 같은 노드에서 발생하지 않더라도 모두 집계된다는 것입니다. 즉, 한 번 이벤트 영역에 진입한 터치 세션 내의 모든 접촉점이 TouchList에 포함됩니다.
문법(Syntax)
TouchEvent의 touches 속성은 TouchList 객체를 반환합니다.
event.touches
참고: 터치 이벤트 예제는 모바일 기기나 터치 입력이 가능한 시스템에서 온라인 HTML 편집기를 통해 실행해야 합니다. 화면을 2초간 길게 누르는 것과 같은 실제 터치 동작을 수행해야 하기 때문입니다.
예제: 게임 플레이어 수 카운터
다음 예제는 TouchEvent touches 속성을 활용하여, 화면에 손가락을 올린 플레이어 수를 실시간으로 표시하는 프로그램입니다.
<!DOCTYPE html>
<html>
<head>
<title>TouchEvent touches</title>
<style>
form {
width:70%;
margin: 0 auto;
text-align: center;
}
* {
padding: 2px;
margin:5px;
}
input[type="button"] {
border-radius: 10px;
}
</style>
</head>
<body>
<form id="formSelect" ontouchstart="startEventAction(event)" ontouchend="endEventAction(event)">
<fieldset>
<legend>TouchEvent-touches</legend>
<label for="textSelect">Game Players Selector</label>
<div id="divDisplay">All Players Place a Finger on Screen<br>Game Starting in 2 sec</div>
</fieldset>
</form>
<script>
var divDisplay = document.getElementById("divDisplay");
var gameSelect = document.getElementById("formSelect");
var duration = 2000;
var timer;
gameSelect.ontouchstart = startEventAction;
function startEventAction(event) {
timer = setTimeout(function(){
eventAction(event)
}, duration);
}
function endEventAction(event){
if(timer)
clearTimeout(timer);
eventAction(event);
}
function eventAction(event) {
var players = event.touches.length;
divDisplay.textContent = 'Total Players: '+players;
gameSelect.removeAttribute('ontouchstart');
gameSelect.removeAttribute('ontouchend');
}
</script>
</body>
</html>코드 설명
- ontouchstart / ontouchend: 폼 요소에 터치 시작과 종료 이벤트 핸들러를 등록합니다.
- setTimeout(duration): 2000ms(2초) 후에 이벤트 처리 함수를 호출하도록 타이머를 설정합니다.
- event.touches.length: 현재 화면에 접촉 중인 손가락(접촉점)의 개수를 반환하여 총 플레이어 수로 표시합니다.
실행 결과
폼 요소를 터치하기 전에는 안내 문구가 표시됩니다.
폼 요소를 2초간 터치한 후에는 화면에 접촉한 손가락 개수만큼 플레이어 수가 표시됩니다.
정리
TouchEvent의 touches 속성은 멀티터치 환경에서 접촉점 정보를 얻는 핵심 도구입니다. event.touches.length로 접촉 중인 손가락 수를 확인할 수 있으며, 게임이나 제스처 기반 인터페이스를 구현할 때 매우 유용하게 활용됩니다.