터치 이벤트에 대한 빠른 응답을위한 코드 최적화

Question

아이콘에 멋진 글꼴을 사용하고 클릭 (터치) 이벤트로 전환하도록합니다. 이 HTML이 있습니다.

<i class="fa fa-circle-o hidden-md hidden-lg"></i> 

그리고이 jquery를 사용하여 앞뒤로 이동하십시오.

$('body').on('click','.fa-check-circle-o, .fa-circle-o', function() { 
    $(this).toggleClass('fa-check-circle-o fa-circle-o'); 
}); 

수행 된 작업의 수에서 눈에 띄는 지연이 :

1. 하는 이벤트를 클릭 감지는
2. 스위치 클래스
3. CSS를
4. 는 CSS

에게 다시 그리기 찾기

지연으로 인해 사용자는 두 번 클릭하여 후계자 초기 클릭이 작동하지 않았습니다. 이 작업을 어떻게 빨리 수행 할 수 있습니까?

(글꼴 멋진 로컬 파일, JQuery와 CDN입니다이며, CSS는 각도 사용 6킬로바이트입니다) 어떤 제안에 대한

감사합니다.

Answer 1

의견을 보내 주셔서 감사합니다. 나는 touchstart를 사용해야했을 때 jquery에서 click 이벤트를 사용하고있었습니다. 이제는 매우 빠르게 작동합니다!

$('body').on('touchstart click','.fa-check-circle-o, .fa-circle-o', function(e) { 
    e.stopPropagation(); e.preventDefault(); 
    $(this).toggleClass('checked'); 
    $(this).toggleClass('fa-check-circle-o fa-circle-o'); 
}); 

Answer 2

이 내가 당신의 문제는 글꼴 멋진 글꼴의 로딩이 아닌 터치 이벤트의 속도가 될 수있다 생각하지만 클릭 기능

$('.fa-check-circle-o, .fa-circle-o').on('click', function() { 
    $(this).toggleClass('fa-check-circle-o fa-circle-o'); 
}); 

을 추가하기위한 더 나은 선택이다. 경고가있는 이벤트의 속도인지 확인하거나 콘솔에 무엇인가를 출력하십시오. 그렇다면 문제가 정확히 무엇인지 알 수 있습니다.

Answer 3

Simple-Touch을 사용할 수 있습니다. 문서 도구를 읽으면 요소에 ID를 설정할 수 있으며 작동하며 장치의 터치에 최적화되어 있습니다.