모바일 Safari에서 클릭 이벤트 시 300ms 지연 제거

모바일 Safari에서 클릭 이벤트 시 300ms 지연 제거

모바일 사파리는 링크/버튼 클릭 시부터 이벤트 발생 시까지 클릭 이벤트 발생 시 300ms 지연된다고 합니다.지연되는 이유는 사용자가 더블클릭을 할 의도가 있는지 확인하기 위해서지만, 300ms를 기다리는 UX 입장에서는 바람직하지 않은 경우가 많습니다.

이러한 300ms 지연을 제거할 수 있는 한 가지 해결책은 jQuery Mobile "탭" 핸들링을 사용하는 것입니다.안타깝게도 저는 이 프레임워크에 익숙하지 않기 때문에 코드를 적용하는 한 두 줄만 있으면 큰 프레임워크를 로드하고 싶지 않습니다.touchend올바른 방법으로

많은 사이트와 마찬가지로 내 사이트에도 다음과 같은 클릭 이벤트가 많이 있습니다.

$("button.submitBtn").on('click', function (e) {   
  $.ajaxSubmit({... //ajax form submisssion
});

$("a.ajax").on('click', function (e) {   
  $.ajax({... //ajax page loading
});

$("button.modal").on('click', function (e) {   
      //show/hide modal dialog
});

그리고 제가 하고 싶은 것은 다음과 같은 하나의 코드 조각을 사용하여 모든 클릭 이벤트에서 300ms 지연을 제거하는 것입니다.

$("a, button").on('tap', function (e) {
 $(this).trigger('click');
 e.preventDefault();
});

그것이 나쁜/좋은 생각입니까?

일부 모바일 브라우저는 뷰포트를 설정하면 300ms 클릭 지연을 제거합니다.더 이상 해결 방법을 사용할 필요가 없습니다.

<meta name="viewport" content="width=device-width, user-scalable=no">

이것은 현재 안드로이드용 크롬, 안드로이드용 파이어폭스, iOS용 사파리를 지원합니다.

그러나 iOS Safari에서 더블 탭은 확대할 수 없는 페이지에서 스크롤 제스처입니다.그렇기 때문에 300ms 지연을 제거할 수 없습니다.확대/축소할 수 없는 페이지에서 지연을 제거할 수 없는 경우 확대/축소할 수 있는 페이지에서 지연을 제거할 수 없습니다.

윈도우 폰 또한 확대할 수 없는 페이지에서 300ms 지연을 유지하고 있지만 iOS와 같은 대체 제스처가 없기 때문에 크롬처럼 지연을 제거할 수 있습니다. 다음을 사용하여 Windows Phone에서 지연을 제거할 수 있습니다.

html {
-ms-touch-action: manipulation;
touch-action: manipulation;
}

출처 : http://updates.html5rocks.com/2013/12/300ms-tap-delay-gone-away

업데이트 2015년 12월

지금까지 iOS의 웹킷과 사파리는 한 번의 탭으로 사람들이 두 번의 탭으로 페이지를 확대할 수 있도록 링크나 버튼을 활성화하기 전에 350ms 지연이 있었습니다.Chrome은 이미 몇 달 전에 그것을 감지하기 위해 더 똑똑한 알고리즘을 사용함으로써 이것을 바꿨고, WebKit도 비슷한 접근방식으로 따를 것입니다.이 기사는 브라우저가 터치 제스처와 함께 작동하는 방식과 브라우저가 어떻게 지금보다 훨씬 더 똑똑해질 수 있는지에 대한 훌륭한 통찰력을 제공합니다.

업데이트 2016년 3월

iOS용 Safari에서는 "빠른 탭" 응답을 만들기 위해 두 번째 탭을 감지하는 350ms 대기 시간이 제거되었습니다.이 기능은 width=device-width 또는 user-marget=no로 뷰포트를 선언하는 페이지에 대해 활성화됩니다.는 CSS를한른탭을할도다여senygsto-cnonrptss을는탭른여를정에touch-action: manipulation여기에 문서화된 바와 같이('Styling Fast-Tap Behavior' 제목으로 스크롤) 여기에 표시됩니다.

Financial Times에서 개발한 FastClick 플러그인은 여러분에게 완벽하게 도움이 됩니다!

추가할 것인지 확인합니다.event.stopPropagation();및는event.preventDefault();클릭 기능이 실행된 후에 바로 실행될 수 있습니다.

$("#buttonId").on('click',function(event){
    event.stopPropagation(); event.preventDefault();
   //do your magic

});

오래된 것은 알지만 브라우저에서 '터치'가 지원되는지 테스트만 해주시면 안 될까요?그런 다음 "터치" 또는 "클릭"하는 변수를 만들고 해당 변수를 요소에 바인딩되는 이벤트로 사용하시겠습니까?

var clickOrTouch = (('ontouchend' in window)) ? 'touchend' : 'click';
$('#element').on(clickOrTouch, function() {
    // do something
});

따라서 해당 코드 샘플은 브라우저에서 "터치" 이벤트가 지원되는지 확인하고 지원되지 않는 경우 "클릭" 이벤트를 사용합니다.

(편집: "touchd"를 "ontouchd"로 변경)

Hammer.js(Gitubpage)라는 굉장히 인기 있는 대안을 발견했는데, 제가 생각하기에 가장 좋은 접근법이라고 생각합니다.

Hammer.js는 Fastclick.js(가장 많이 선택된 답변)보다 더 완전한 기능의 터치 라이브러리(많은 스와이프 명령이 있음)입니다.

하지만 주의하세요: 모바일 장치에서 빠르게 스크롤하면 Hammer.js 또는 Fastclick.js를 사용할 때 UI가 실제로 잠기는 경향이 있습니다.사이트에 뉴스 피드가 있거나 사용자가 많이 스크롤하는 인터페이스가 있는 경우에는 대부분의 웹 앱처럼 보일 수 있습니다.이러한 이유로 현재 이 두 플러그인을 모두 사용하지 않고 있습니다.

어떻게든 확대/축소를 비활성화하면 이 작은 지연이 비활성화되는 것 같습니다.이제 더블 탭이 필요 없기 때문에 말이 됩니다.

모바일 웹 페이지에서 확대/축소를 "비활성화"하려면 어떻게 해야 합니까?

하지만 이것이 사용성에 미칠 영향에 대해 알아두시기 바랍니다.앱으로 설계된 웹 페이지에는 유용할 수 있지만 보다 범용적인 '정적인' 페이지 IMHO에는 사용해서는 안 됩니다.저지연이 필요한 반려동물 프로젝트에 사용합니다.

유감스럽게도 이것을 할 수 있는 쉬운 방법이 없습니다.냥으로.touchstart아니면touchend예를 들어 버튼을 클릭하면 누군가가 스크롤을 시작하는 것과 같은 다른 문제가 발생합니다.우리는 한동안 zepto를 사용하고, 이 정말 좋은 프레임워크에도 불구하고 시간이 지나면서 나타난 몇 가지 문제들이 있습니다.상당수가 문을 닫았지만 단순한 해결의 분야는 아닌 것 같습니다.

링크 클릭을 전 세계적으로 처리할 수 있는 이 솔루션이 있습니다.

   $(document.body).
    on('tap', 'a',function (e) {
      var href = this.getAttribute('href');
      if (e.defaultPrevented || !href) { return; }
      e.preventDefault();
      location.href= href;
    }).
    on('click', 'a', function (e) {
      e.preventDefault();
    });

jquery 없이, fast click library 없이 쉬운 방법을 찾아 보았습니다.이것은 저에게 효과가 있습니다.

var keyboard = document.getElementById("keyboard");
var buttons = keyboard.children;
var isTouch = ("ontouchstart" in window);
for (var i=0;i<buttons.length;i++) {
    if ( isTouch ) {
        buttons[i].addEventListener('touchstart', clickHandler, false);         
    } else {
        buttons[i].addEventListener('click', clickHandler, false);          
    }
}

jQuery에서는 탭 직후에 "터치" 이벤트, witch trigger 코드를 바인딩할 수 있습니다(키보드의 키다운과 같습니다.현재 Chrome 및 Firefox 태블릿 버전에서 테스트되었습니다.터치스크린 노트북 및 데스크톱 기기의 경우 "클릭"도 잊지 마십시오.

jQuery('.yourElements').bind('click touchend',function(event){

    event.stopPropagation();
    event.preventDefault();

	// everything else
});

추가적인 정보를 제공하기 위해서입니다.

iOS 10에서.<button>s를 내 페이지에서 연속적으로 트리거할 수 없습니다.항상 시차가 있었습니다.

fast click / Hammer / tapjs / touchstart로 click 교체를 시도했지만 모두 실패했습니다.

업데이트: 버튼이 가장자리에 너무 가까이 있는 것 같습니다! 중앙 근처로 이동하면 시차가 사라집니다!

패시브 모드를 명시적으로 선언해야 합니다.

window.addEventListener('touchstart', (e) => {

    alert('fast touch');

}, { passive : true});

언급URL : https://stackoverflow.com/questions/12238587/eliminate-300ms-delay-on-click-events-in-mobile-safari