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

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

---

모바일 Safari는 링크 / 버튼을 클릭 할 때부터 이벤트가 시작될 때까지 클릭 이벤트에 300ms 지연이 있다는 것을 읽었습니다 . 지연의 이유는 사용자가 더블 클릭을 하려는지 확인하기 위해 기다리는 것이지만 UX 관점에서 300ms를 기다리는 것은 종종 바람직하지 않습니다.

이 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 지연을 제거 할 수 없습니다 . 확대 / 축소 할 수없는 페이지에서 지연을 제거 할 수없는 경우 확대 / 축소 가능한 페이지에서 제거 할 가능성이 낮습니다.

Windows Phone 은 또한 확대 할 수없는 페이지에서 300ms 지연을 유지하지만 iOS와 같은 대체 제스처가 없으므로 Chrome 에서처럼 이러한 지연을 제거 할 수 있습니다.다음을 사용하여 Windows Phone에서 지연을 제거 할 수 있습니다.

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

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

업데이트 2015 년 12 월

지금까지 iOS의 WebKit 및 Safari는 사람들이 두 번 탭하여 페이지를 확대 할 수 있도록 한 번의 탭으로 링크 나 버튼을 활성화하기까지 350ms의 지연이있었습니다. Chrome은이를 감지하기 위해 더 스마트 한 알고리즘을 사용하여 이미 몇 달 전에 이것을 변경했으며 WebKit은 유사한 접근 방식을 따를 것 입니다. 이 기사는 브라우저가 터치 제스처와 함께 작동하는 방식과 브라우저가 오늘날보다 훨씬 더 똑똑해질 수있는 방법에 대한 훌륭한 통찰력을 제공합니다.

2016 년 3 월 업데이트

iOS 용 Safari에서 두 번째 탭을 감지하는 350ms의 대기 시간이 "빠른 탭"응답을 생성하기 위해 제거되었습니다. width = device-width 또는 user-scalable = no로 뷰포트를 선언하는 페이지에 대해 활성화됩니다. 작성자는 여기에touch-action: manipulation 설명 된대로 CSS 를 사용하여 특정 요소에 대한 빠른 탭 동작을 선택할 수도 있습니다 ( 'Styling Fast-Tap Behavior'제목으로 스크롤) 및 here .

---

Financial Times에서 개발 한이 플러그인 -FastClick 은 완벽하게 작동합니다!

클릭 기능 을 추가 event.stopPropagation();하거나 event.preventDefault();바로 뒤에 추가해야 합니다. 그렇지 않으면 나에게 한 것처럼 두 번 실행될 수 있습니다.

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

});

---

i know this is old but can't you just test to see if "touch" is supported in the browser? Then create a variable that's either "touchend" or "click" and use that variable as the event that gets bound to your element?

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

So that code sample checks to see if the "touchend" event is supported in the browser and if not then we use the "click" event.

(Edit: changed "touchend" to "ontouchend")

---

I've come across a hugely popular alternative called Hammer.js (Github page) which I think is the best approach.

Hammer.js is a more full-featured touch library (has many swipe commands) than Fastclick.js (most upvoted answer).

Beware though: scrolling fast on mobile devices tends to really lock up the UI when you use either Hammer.js or Fastclick.js. This is a major problem if your site has a newsfeed or an interface where users will be scrolling a lot (would seem like most web apps). For this reason, I'm using neither of these plugins at the moment.

---

Somehow, disabling zoom seems to disable this small delay. Makes sense, as double-tap isn't needed anymore then.

How can I "disable" zoom on a mobile web page?

But please be aware of the usability impact this will have. It may be useful for webpages designed as apps, but shouldn't be used for more general-purpose 'static' pages IMHO. I use it for a pet project that needs low latency.

---

Unfortunately there is no easy way to do this. So just using touchstart or touchend will leave you with other problems like someone starts scrolling when click on on a button for example. We use zepto for a while, and even with this really good framework there are some issues that came up over the time. A lot of them are closed, but it seems is not a field of simple solution.

We have this solution to globally handle clicks on links:

   $(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();
    });

---

I searched for an easy way without jquery and without fastclick library. This works for me:

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);          
    }
}

---

Just to provide some extra information.

On iOS 10, <button>s on my page could not be triggered continuously. There was always a lag.

I tried fastclick / Hammer / tapjs / replacing click with touchstart, all failed.

UPDATE: the reason seems to be that the button is too close to the edge! move it to near the center and lag gone!

---

You're supposed to explicitly declare passive mode :

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

    alert('fast touch');

}, { passive : true});

---

In jQuery you can bind "touchend" event, witch trigger code inmediatly after tap (is like a keydown in keyboard). Tested on current Chrome and Firefox tablet versions. Don't forget "click" also, for your touch screen laptops and desktop devices.

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

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

	// everything else
});

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