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 see if the user intends to double-click, but from a UX perspective waiting 300ms is often undesirable.

One solution to eliminate this 300ms delay is to use jQuery Mobile "tap" handling. Unfortunately I'm not familiar with this framework and don't want to load some big framework if all I need is a line or two of code applying touchend in the right way.

Like many sites, my site has many click events like this:

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

and what I'd like to do is to get rid of the 300ms delay on ALL those click events using a single code snippet like this:

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

Is that a bad/good idea?

[Here is an interesting article for you.](http://labs.ft.com/articles/ft-fastclick/) — Pointy, Sep 02 '12 at 18:27
"...obviously this isn't great from a UX perspective." I would be wary about this assumption. — Oliver Moran, Sep 02 '12 at 18:58
@OliverMoran, thanks for the correction, i just edited that sentence, see the question above.. — tim peterson, Sep 02 '12 at 19:01
might be a solution: http://stackoverflow.com/a/12969739/1491212 — Armel Larcier, Nov 03 '12 at 12:40
Issue persists on ios 9 :/ meta tags (width=device-width user-scalable:no initial-scale:1,maximum-scale:1) or touch-action:manipulation does not fix it. — daghan, Sep 17 '15 at 09:05

score 77 · Accepted Answer · edited Dec 10 '18 at 00:53

77

Now some mobile browsers eliminate 300 ms click delay if you set the viewport. You don't need to use workarounds anymore.

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

This is currently supported Chrome for Android, Firefox for Android and Safari for iOS

However on iOS Safari, double-tap is a scroll gesture on unzoomable pages. For that reason they can't remove the 300ms delay. If they can't remove the delay on unzoomable pages, they're unlikely to remove it on zoomable pages.

Windows Phones also retain the 300ms delay on unzoomable pages, but they don't have an alternative gesture like iOS so it's possible for them to remove this delay as Chrome has. You can remove the delay on Windows Phone using:

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

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

UPDATE 2015 December

Until now, WebKit and Safari on iOS had a 350ms delay before single taps activate links or buttons to allow people to zoom into pages with a double tap. Chrome changed this a couple of months ago already by using a smarter algorithm to detect that and WebKit will follow with a similar approach. The article gives some great insights how browsers work with touch gestures and how browsers can still get so much smarter than they are today.

UPDATE 2016 March

On Safari for iOS, the 350 ms wait time to detect a second tap has been removed to create a “fast-tap” response. This is enabled for pages that declare a viewport with either width=device-width or user-scalable=no. Authors can also opt in to fast-tap behavior on specific elements by using the CSS touch-action: manipulation as documented here (scroll down to the 'Styling Fast-Tap Behavior' heading) and here.

edited Dec 10 '18 at 00:53

robocat

5,293
48
65

answered Jan 11 '14 at 12:21

NoNameProvided

8,608
9
40
68

Actually, there are touch events for WP: http://stackoverflow.com/questions/13396297/windows-phone-8-touch-support – Cedric Reichenbach Jan 19 '14 at 14:07
1

Yes which is controlled by -ms-touch-action as I wrote in my post. – NoNameProvided Jan 20 '14 at 11:44
1

Issue still exists on iOS when running the application from the home page (standalone). If anybody has found a decent workaround for it, it would be very much welcome – Miguel Guardo Mar 27 '17 at 16:55
1

Setting the touch-action values to manipulation comes closest to the desired performance, but as @MiguelGuardo stated previously, the effect is lost once you add the webpage to your home screen in iOS as a standalone app. – T. Steele Apr 25 '17 at 13:42
May be someone can hack UIWebView - https://stackoverflow.com/questions/55155560/cordova-disabling-the-click-delay-300ms-click-delay-in-uiwebview – Eazy Mar 17 '19 at 08:51
You don't need hacks, there is an official way of doing it as I detailed in my answer. – NoNameProvided Mar 17 '19 at 17:58
FYI: Safari only disables the delay when the website ist not zoomed in. So `` is enough, but you need to be on default zoom level. – jakub_jo Jul 22 '20 at 09:36

Jonathan · Answer 2 · 2014-09-10T09:41:08.773

43

This plugin -FastClick developed by Financial Times does it perfectly for you!

Make sure though to add event.stopPropagation(); and/or event.preventDefault(); directly after the click function, otherwise it might run twice as it did for me, i.e.:

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

});

edited Sep 10 '14 at 09:41

answered Nov 05 '12 at 01:08

Jonathan

2,953
3
26
37

3

This is not perfect if you are using jquery mobile (version 1.3.2 anyway), it breaks the closing of the panel widget https://github.com/jquery/jquery-mobile/issues/6440 – ryan0 Dec 20 '13 at 19:58
that event.stopPropagation() is exactly why I came to this page in the first place. Works perfectly, thank you! – Lukas Jun 20 '14 at 22:42
@Jonathan `fastclick` does its magic only on touch devices which have a delay problem (else it's [automatically bypassed](https://github.com/ftlabs/fastclick/blob/master/lib/fastclick.js#L730) ). However, simply adding `stopPropagation` & `preventDefault` after every click event might have unwanted side affect on all event handlers in all browsers. – user Sep 21 '15 at 07:02

Michael Turnwall · Answer 3 · 2013-04-29T22:16:09.373

16

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

edited Apr 29 '13 at 22:16

answered Apr 29 '13 at 22:08

Michael Turnwall

649
7
21

Thanks, I like the simplicity of this. I would love for others to chime on its possible pitfalls. – tim peterson Apr 30 '13 at 00:42
4

touchend event can't replace click event because of what @Andreas Köberle explains in his reply. Like for example if you scroll and your finger stop on a button, it will trigger the link... – adriendenat May 16 '13 at 17:07
This is an awesome light-weight solution without having to include a big fat additional library of stuff just to get rid of the delay. Wish I could up vote 5 times on this one! (as long as you're not worried about the scroll scenario!) – tonejac Aug 17 '14 at 00:34
2

For computers/browsers with touch and click event support, this is a bad solution. – Alexander O'Mara Sep 17 '14 at 15:43
Why? If a browser supports both touch and click then touch will be used. – Michael Turnwall Sep 18 '14 at 05:21
1

Some devices support both touch and click events, and you want them both to fire in different situations. We have experienced situations where some windows or android tablets that have a mouse will obviously fire a click event when you click on a thing, but it will also fire touch events when you tap. This meant you had to listen to both events. As an additional complicating factor, some devices would synthesize a click event when you tapped, so listening to both on those devices could result in your event handler firing twice, unless you were careful. – 1800 INFORMATION Apr 29 '15 at 20:34
`touchend` is equivalent to `mouseup`, not `click` – Stijn de Witt Jul 06 '15 at 19:24

tim peterson · Answer 4 · 2013-06-04T15:17:23.510

12

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.

edited Jun 04 '13 at 15:17

answered May 24 '13 at 14:19

tim peterson

23,653
59
177
299

2

Don't use Hammerjs. It has some seriously issues, for example: https://github.com/EightMedia/hammer.js/issues/388 https://github.com/EightMedia/hammer.js/issues/366 At least don't use it until they get fixed – Adonis K. Kakoulidis Oct 27 '13 at 10:29

score 2 · Answer 5 · edited May 23 '17 at 11:54

2

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.

edited May 23 '17 at 11:54

Community

1
1

answered Mar 02 '13 at 20:14

ayke

1,582
12
14

Andreas Köberle · Answer 6 · 2012-09-02T20:27:53.280

1

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

edited Sep 02 '12 at 20:27

answered Sep 02 '12 at 18:56

Andreas Köberle

106,652
57
273
297

-@Andreas, thanks so you'd advocate not using the general `tap` solution i posted and factoring the `tap` events on an element-by-element basis? – tim peterson Sep 02 '12 at 20:17
No thats not the point. The point is not to try to build a `tap`solution by yourself. I'll will update my answer. – Andreas Köberle Sep 02 '12 at 20:23
-@Andreas, thanks for your answer, many click events are AJAX so the default event is already prevented. Would you mind updating your answer to handle this too? It would seem that my general `tap` solution would look the same as yours in this case? – tim peterson Sep 02 '12 at 20:54

score 1 · Answer 7 · answered Aug 15 '15 at 20:11

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

score 1 · Answer 8 · answered Dec 07 '17 at 23:20

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

dz902 · Answer 9 · 2017-03-07T10:29:36.147

0

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!

edited Mar 07 '17 at 10:29

answered Mar 07 '17 at 10:02

dz902

4,782
38
41

score 0 · Answer 10 · answered Aug 15 '17 at 21:23

0

You're supposed to explicitly declare passive mode :

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

    alert('fast touch');

}, { passive : true});

answered Aug 15 '17 at 21:23

Bruno Andrade

386
4
5

Eliminate 300ms delay on click events in mobile Safari

10 Answers10

Linked