Eliminate 300ms delay on click events in mobile Safari

Question

I\'ve read that mobile Safari has a 300ms delay on click events from the time the link/button is clicked to the time the event fires. The reason for the delay is to wait to

Answer 1

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!

Answer 2

You're supposed to explicitly declare passive mode :

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

    alert('fast touch');

}, { passive : true});

Answer 3

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

Answer 4

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.

Answer 5

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

Answer 6

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")