[Plugin] 터치 이벤트와 더블탭 이벤트

터치 이벤트

모바일 웹 페이지에선 더블탭에 대한 이벤트가 없다. 따라서 이러한 동작들을 터치 이벤트를 통해 분석해야 한다.

터치 이벤트의 종류

• touchstart: 스크린에 손가락이 닿을 때 발생
• touchmove: 스크린에 손가락이 닿은채로 움직일 때 발생
• touchend: 스크린에서 손가락을 뗄 때 발생
• touchcancel: 시스템에서 이벤트를 취소시킬 때 발생. 표준이 없으므로 touchend 이벤트로 간주해도 무방

터치이벤트의 특징

• 2, 3개의 손가락으로 화면 조작을 하는 경우가 있어서 각 터치에 대한 정보를 모두 포함한다(안드로이드 3.0미만 브라우저는 그렇지 않다).
• 손가락 접촉면이 크기 때문에 접촉 표면의 평균 좌표값을 얻는다.
• Mouseover이벤트에 해당하는 이벤트가 없다.

터치 이벤트의 정보 저장

터치 및 그 정보는 이벤트 객체의 touches속성, targetTouches속성, changedTouches속성에 배열 형태로 저장된다. 배열의 크기는 터치 개수에 따라 결정된다.

터치 객체 속성

• identifier: 인식 점 구분을 위한 인식 점 번호
• screenX: 디바이스 화면을 기준으로 한 X좌표
• screenY: 디바이스 화면을 기준으로 한 Y좌표
• clientX: 브라우저 화면을 기준으로 한 X좌표(스크롤 미포함)
• clientY: 브라우저 화면을 기준으로 한 Y좌표(스크롤 미포함)
• pageX: 가로 스크롤을 포함한 브라우저 화면을 기준으로 한 X좌표
• pageY: 가로 스크롤을 포함한 브라우저 화면을 기준으로 한 Y좌표
• target: 터치된 DOM 객체체

더블탭 이벤트

플러그인을 이용하면 tap / double tap / swipe 이벤트를 모바일에서 쉽게 구현할 수 있다. 첨부 파일을 다운받은 후 압축을 풀고 다음과 같이 사용할 수 있다.

touchy-master.zip

	<script src='jquery.touch.js'></script>
	<script>
		$('div').on('swipe', function(e, Dx, Dy){
			var side = (Dx < 0) ? '←' : (Dx > 0) ? '→' : (Dy > 0) ? '↑' : (Dy < 0) ? '↓' : '?'; 
			$(this).html('' + side + '');
		}).on('doubleTap', function(){
			$(this).html('doubleTap');
		}).on('tap', function(){
			$(this).html('Tap');
		})
	</script>