자바스크립트 클릭 이벤트 흐름도 (터치이벤트 지원디바이즈 기준)

터치이벤트를 지원하는 기기 태블릿 or 모바일의 경우 클릭 이벤트는 아래와같은 이벤트 순서로 진행된다.

touchstart - touchend - mouseover - mousemove - mousedown - mouseup - click

이 브라우져들은 버튼 등을 눌렀다(touchstart) 떼도(touchup) 즉시 반응(click)하지 않는다.

브라우저 자체적으로 연속되는 터치 동작(touchstart-touchmove-touchend)들이 제스쳐(swipe, long click, …)인지 여부를 확인하기 위해 최대 300ms의 지연시간이 생기기 때문. 

하지만 즉시반응하게 구현을 하려면 아래의 과정을 거치면 된다.

1. 손가락으로 무언가를 누르면(touchstart) 

2. 웹킷의 기본 동작(300ms 지연)을 못하게 막고(preventDefault)

3. 움직임(touchmove) 없이

4. 손가락을 떼면(touchend)

5. 클릭(click)으로 간주한다.

출처 : http://blog.iolo.kr/490