Javascript Touch & Gesture Event for Mobile Browser
페이지 정보
작성자 서방님 댓글 0건 조회 97회 작성일 11-08-05 09:24본문
모바일 브라우저의 Touch, Gesture Event 처리 방법
Android and iPhone touch events
안드로이드, 아이폰은 공통적으로 터치와 관련해서 다음과 같은 이벤트를 제공
- touchstart - mouseDown 이벤트와 비슷한 이벤트로 손이 화면에 닿으면 발생
- touchmove - mouseMove 이벤트와 비슷한 이벤트로 손을 터치한 상태로 이동하면 발생
- touchend - mouseUp 이벤트와 비슷한 이벤트로 손을 화면에서 뗄 때 발생. 아이폰의 경우 touchcancel 이벤트가 발생
- touchcancle - bit of a mystery
예제)
doucument.addEventListener('touchstart', function(event) {
alert(event.touches.length);
}, false);
Event object
위의 예제에서 보듯이 Touch Event Object는 touches array를 포함하고 있다. 안드로이드의 경우 이벤트에는 한 개의 터치 오브젝트를 포함한다. 즉 touches.length는 1이다. 터치 아이폰의 경우에는 멀티터치가 가능하기 때문에 touches array를 통해서 핸들링 할 수 있다. 터치 이벤트 객체는 마우스 이벤트 객체와 같이 pageX, pageY 등의 값들을 포함하고 있다.
예제)
document.addEventListener('touchmove', function(event) {
event.preventDefault();
var touch = event.touches[0];
console.log("Touch x:" + touch.pageX + ", y:" + touch.pageY);
}, false);
- clientX : X coordinate of touch relative to the viewport (excludes scroll offset)
- clientY : Y coordinate of touch relative to the viewport (excludes scroll offset)
- screenX : Relative to the screen
- screenY : Relative to the screen
- pageX : Relative to the full page (includes scrolling)
- pageY : Relative to the full page (includes scrolling)
- target : Node the touch event originated from
- identifier : An identifying number, unique to each touch event
iPhone Touch and Gesture Events
애플의 WebKit은 안드로이드와 달리 몇가지 것들을 추가적으로 지원한다. touchEnd 이벤트는 event.touches array에서 현재 touch 를 제거해 준다. 대신 event.changeTouches array를 이용해서 볼 수 있다.
애플 iPhone의 터치 이벤트 객체
- touches - touchStart, touchMove, touchEnd 의 터치 정보를 포함하고 있는 array
- targetTouches - 같은 target Element로 부터 비롯된 touches 정보를 포함
- changedTouches - 모든 touch 정보를 가지고 있는 객체
Gesture events
애플에서는 pinching, rotating과 같은 멀티 터치 이벤트를 처리할 수 있도록 지원한다.
- gesturestart - 멀티 터치 시작
- gesturechange - 멀티 터치를 해서 움직일 때 발생
- gestureend - 멀티 터치 이벤트가 끝날 때 발생
멀티 터치를 위한 이벤트 객체는 scale, rotation 값을 갖고 touch 객체가 없다.
예제)
document.addEventListener('gesturechange', function(event) {
event.preventDefault();
console.log("Scale : " + event.scale + ", Rotation : " + event.rotation);
}, false);
Event table
| touchstart |
touchmove |
touchend |
gesturestart |
gesturemove |
gestureend | |
|---|---|---|---|---|---|---|
| Android |
y |
y |
y |
n |
n |
n |
| iPhone |
y |
y |
y |
y |
y |
y |
| has event.touches |
y |
y |
y |
n |
n |
n |
| (iPhone) has event.scale and event.rotation |
n |
n |
n |
y |
y |
y |
| (iPhone) touch in event.touches |
y |
y |
n |
- |
- |
- |
| (iPhone) touch in event.changedTouches |
y |
y |
y |
- |
- |
- |
아이폰에서 터치 이벤트 처리시 주의사항
touchEnd 이벤트는 event.touches array에서 마지막 touch가 포함되어 있지 않다. 따라서 마지막 위치의 좌표를 얻기 위해서는 event.changeTouches array를 이용해서 볼 수 있다.
http://backtothecode.blogspot.com/2009/10/javascript-touch-and-gesture-events.html
http://www.sitepen.com/blog/2008/07/10/touching-and-gesturing-on-the-iphone/
댓글목록
등록된 댓글이 없습니다.
