애니빌드.LAB
Javascript
Library fastclick 모바일웹에서 터치 딜레이를 없애주는 라이브러리
- 망구
- 2014-03-05 13:50:00
- hit13727
- http://wdev.anybuild.co.kr/bbs/javascript/1627
모바일웹에서 링크를 탭하면 300ms속도의 딜레이가 발생하는데 그 이유는 더블탭을 확인하기위하여 약간의 딜레이가 발생한다. 하지만 그 작은 딜레이가 작동이 뭔가 문제가 느껴지거나 체감상 느리게 느껴지게 하는 원인이 된다.
그래서 이 라이브러리는 300ms딜레이를 제거했다.
자세한 내용은 아래에 있는 링크로 들어가서 참고하길 바란다.
출처 및 제작사 GitHub : https://github.com/ftlabs/fastclick
1. <head/> 엘리먼트에 아래와같은 meta엘리먼트를 넣어준다.
ie10일경우 아래와같은 css코드에서
2. 자바스크립트를 로드한다.
3. 자바스크립트를 실행한다.
native
jquery
ps. fastclick 을 특정부분에서 무시하려면 아래와같이 특정이름의 클래스를 넣어준다.
ps. 솔루션 cdn경로 : /img_up/_addon/_plugin/fastclick/1.0.0/fastclick.min.js
그래서 이 라이브러리는 300ms딜레이를 제거했다.
자세한 내용은 아래에 있는 링크로 들어가서 참고하길 바란다.
출처 및 제작사 GitHub : https://github.com/ftlabs/fastclick
1. <head/> 엘리먼트에 아래와같은 meta엘리먼트를 넣어준다.
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
ie10일경우 아래와같은 css코드에서
a, button {-ms-touch-action: none;}
와같이 버튼 엘리먼트 터치 속성을 변경한다.2. 자바스크립트를 로드한다.
<script type='application/javascript' src='/path/to/fastclick.js'></script>
3. 자바스크립트를 실행한다.
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>
ps. 솔루션 cdn경로 : /img_up/_addon/_plugin/fastclick/1.0.0/fastclick.min.js
게시글 공유
URL복사
댓글작성
열기 닫기
열기 닫기