터치 이벤트

많은 모바일 기기에서 작동하는 터치 인식 앱을 작성할 수 있습니다. 터치 인식 데스크톱 브라우저도 곧 출시될 예정이니 지금부터 대비하세요.

최초로 iOS 2.0 용 모바일 Safari 에 등장했습니다.

네 가지 기본 이벤트:

• touchstart
• touchmove
• touchend
• touchcancel

이벤트 객체 필드:

• touches
• targetTouches
• changedTouches
• 수정 키 (shift, alt, ctrl, meta)

터치 객체 필드:

• identifier
• clientX/Y
• pageX/Y
• screenX/Y

현재 W3C 작업 초안 (Working Draft) 상태입니다.

관련 항목: Unity Asset Store — Unity 프로젝트에 바로 적용할 수 있는 기성 아트, 도구 및 템플릿.

벤더 간에 여전히 많은 차이점이 존재합니다:

• touchenter / touchleave (Firefox, Blackberry)
• gesturestart / gesturechange / gestureend (모바일 Safari)
• MSPointer* / MSGesture* (IE10)

네이티브와 유사한 동작

대체 입력 방식을 지원하는 기기들

• 멀티터치: FF6+ 는 W3C 스타일 터치 이벤트를 지원합니다.
• IE10 은 MSPointer* / MSGesture* 를 지원합니다.
• WebKit 에서는 아직 지원되지 않습니다.

표준 제스처 처리 비활성화 (팬/줌/스크롤)

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

그리고

우리의 선택: Udemy Game Development Courses — Unity, Unreal, C++, C# 및 셰이더 프로그래밍을 다루는 주문형 과정.

document.body.addEventListener('touchmove', function(event) {
  event.preventDefault();
}, false);

표준 제스처 처리 비활성화 (팬/줌/스크롤)

루프 내에서 렌더링 처리:

var touches = [], // 여기에서 requestAnimationFrame() 을 사용할 수도 있습니다.
renderLoop = setInterval(function() {
  draw(touches); // 그리기 함수 호출
}, 15);

myElement.addEventListener('touchmove', function(e) {
  touches = e.touches;
}, false);

표준 제스처 처리 비활성화 (팬/줌/스크롤)

• 루프 내에서 렌더링 처리
• 단일 터치 기기 지원 (예: Android 폰)

표준 제스처 처리 비활성화 (팬/줌/스크롤)

• 루프 내에서 렌더링 처리
• 단일 터치 기기 지원 (예: Android 폰)
• 마우스 이벤트 처리 대상:
  • 물리적 포인터 하드웨어가 있는 폰 (예: 많은 Android 핸드셋)
  • 터치 이벤트가 없는 폰 (예: Windows Phone 7)
  • 터치를 지원하지 않는 데스크톱 브라우저 (예: Chrome)

표준 제스처 처리 비활성화 (팬/줌/스크롤)

• 루프 내에서 렌더링 처리
• 단일 터치 기기 지원 (예: Android 폰)
• 마우스 이벤트 처리
• 터치를 지원하는 데스크톱 브라우저 지원:
  • Firefox (W3C 스타일 터치 이벤트)
  • IE10 (MSPointer*)

@ @ggoodale