모바일웹에서 터치 딜레이를 없애주는 라이브러리 fastclick on redgoose note

모바일웹에서 터치 딜레이를 없애주는 라이브러리 fastclick

Nest: Development Category: Javascript 2014-03-05

모바일웹에서 링크를 탭하면 300ms속도의 딜레이가 발생하는데 그 이유는 더블탭을 확인하기위하여 약간의 딜레이가 발생한다.
하지만 그 작은 딜레이가 작동이 뭔가 문제가 느껴지거나 체감상 느리게 느껴지게 하는 원인이 된다.

그래서 이 라이브러리는 300ms딜레이를 제거했다.

자세한 내용은 아래에 있는 링크로 들어가서 참고하길 바란다.
출처 및 제작사 GitHub : https://github.com/ftlabs/fastclick

엘리먼트에 아래와같은 meta엘리먼트를 넣어준다.

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

ie10일경우 아래와같은 css코드에서 a, button {-ms-touch-action: none;}와 같이 버튼 엘리먼트 터치 속성을 변경한다.

자바스크립트를 로드

<script type='application/javascript' src='/path/to/fastclick.js'></script>

자바스크립트를 실행

// native
window.addEventListener('load', function() {
    FastClick.attach(document.body);
}, false);
// jquery
$(function() {
    FastClick.attach(document.body);
});

ps.
fastclick 을 특정부분에서 무시하려면 아래와같이 특정이름의 클래스를 넣어준다.

<a class="needsclick">Ignored by FastClick</a>