mousewheel 플러그인은 모바일에서 스크롤 적용이 안됨 따라서 따로 모바일 터치 이벤트 처리를 해야한다. 터치 이벤트로는 크게 4가지가
있다 ·touchstart ·touchend ·touchmove ·touchcancel 이들을 이용해 요소에 터치 이벤트를 리스닝할 수 있고, 여러 손가락의 위치에 대한 터치 정보도 얻을 수 있다. 이 정보를 이용해 줌이나 회전 등의 일반적인 멀티 터치 제스처 뿐만 아니라 거의 모든 종류의 터치 조작에 대응할 수 있다.
디바이스 화면에 손가락이 닿는 순간 발생하는 이벤트 하지만 windowphone에서는 touchstart가 발생하지 않고
pointerdown이 발생한다
디바이스 화면에 손가락이 닿은 상태에서 손가락을 떼어내면 발생하는 이벤트다. 주의해야 할 점은 안드로이드 4.x에서 touchstart, touchmove시 e.preventDefault()를 수행하여 브라우저의 스크롤을 정지해주지 않으면 touchend 이벤트가 발생하지 않는다는 것이다. 또한 touchend는 mouseup과 대칭되지 않으며 간헐적으로 touchend 대신 touchcancel이벤트를 발생하는 경우가 있으므로 문제가 되지 않는다면 touchend 이벤트 리스너를 touchcancel에도 등록해주는 편이 좋다.
touchmove = gesturechange(아이폰)
디바이스
화면에 손가락이 닿은 상태에서 손가락을 움직이면 발생하는 이벤트다. 주의해야할 점은 일부 안드로이드 디바이스에서 touchstart시 e.preventDefault()를 수행하여 브라우저의 스크롤을 중지하지 않으면 touchmove가 처음 몇 번 발생하지 않는다는 것이다. 또한 처음 몇 번의 touchmove가 발생할 때 e.preventDefault()를 수행해야 touchmove가 지속적으로 발생할 수 있는 안드로이드 디바이스도 존재한다고 한다.
터치 이벤트가 시스템으로 인해 취소 될 때 발생하는 이벤트이다. 전화나 메일의 착신 등 시스템 측의 어떤 동작으로 인해 터치 이벤트가 취소되는 경우에 발생한다. 하지만 windowsphone에는 구현되어 있지 않고, windowsphone에서는 pointercancel이
발생한다.
제스처 라이브러리
터치 이벤트를 기반으로한 많은 제스처 라이브러리가 있다 그 중에서도 이해비용이 낮고, 가볍고, 정확한 라이브러리는 2개 정도. 1. Hammer.js 구현된 이벤트가 풍부하고 정확하다. 디바이스 이슈 대응 등 관리가 잘 되고 있으며, 클라이언트가 제스처 플러그인을 추가로 등록해 사용할 수 있다. QuoJS와 더불어 단독 라이브러리로 특정 라이브러리를 의존하지 않는다. 2. QuoJS 필요한 이벤트만 부족하지 않게 구현하고 있는 경량 라이브러리다. 매우
우수한 수준의 이벤트를 감지해 준다.
모바일 터치 스크롤 이벤트
터치가 시작된 좌표값과 터치가 끝난 좌표값을 비교해 터치 스크롤 이벤트를 구현할 수 있다.
var ts; $('html, body').bind('touchstart', function(e){ e.stopPropagation(); ts = e.originalEvent.touches[0].clientY; }); $('html, body').bind('touchend', function(e){ e.stopPropagation(); var te = e. originalEvent.changedTouches[0].clientY; if(ts > te +
5){ console.log('touch down'); } else if(ts < te - 5){ console.log('touch up'); } });
각 터치와 터치에 대한 정보는 이벤트 객체의 touches속성과 tartgetTouches 속성, changedTouches 속성에 배열 형태로 저장되며 터치한 손가락에 개수에 따라 배열의 크기가 결정된다. 멀티터치를 지원하지 않는 안드로이드 3.0미만의 브라우저에서는 배열의 크기는 항상 1이다.
identifier : 인식 점을 구분하기 위한 인식 점 번호 screenX : 디바이스 화면을 기준으로 한 X 좌표 screenY: 디바이스 화면을 기준으로 한 Y 좌표 clientX: 브라우저 화면을 기준으로 한 X 좌표
(스크롤 미포함) clientY: 브라우저 화면을 기준으로 한 Y 좌표 (스크롤 미포함) pageX: 가로 스크롤을 포함한 브라우저 화면을 기준으로 한 X 좌표 pageY: 세로 스크롤을 포함한 브라우저 화면을 기준으로 한 Y 좌표 target: 터치된 DOM 객체
현재 터치 이벤트는 Webkit 계열의 브라우저에서만 지원하고 그 외 브라우저에서는 지원하지 않는다. 멀티터치 touchstart 이벤트와 touchend이벤트를 활용해서 구별하기 힘들다. 손가락으로 터치하는 특성상 한 번에 두개를 터치해도 시스템적으로 터치 시점에 차이가 있기때문에 touchstart이벤트와 touchend 이벤트 시점을 구별하기 힘들다. 멀티터치를 구현할 때에는 touchmove
이벤트를 활용하기를 권장한다.
