Click Delay On IPhone and Suppressing Input Focus

Question

The webkit browser on iphone has a 300ms delay between when a user does a touch and when the javascript gets a click event. This happens because the browser needs to check if a user has done a double tap. My app doesn't allow zooming so a double tap is useless for me. A number of people have proposed solutions to this problem and they usually involve handling the 'click' on the touch end event and then ignoring the click generated by the browser. However, it doesn't seem to be possible to suppress a click that gets sent to an input element. This can cause a problem if you have a dialog that opens above a form then a user hits the close button and their click gets routed to an input element when the form disappears.

Example with jqtouch (for iphone only)

Glazing

Answer 1

You have to capture your event on touchstart if you want to get the fastest possible responsiveness. Otherwise you'll be doomed with this input lag.

You have to remember though that capturing event on touchstart and responding to it makes it impossible to cancel action by dragging your finger out of responsive area.

I have personally used this in my PhoneGap html/js based iphone application and it worked perfect. The only solution to give this almost-native feel.

Now regarding your problem - have you tried to stop the propagation of the event? It should solve your problem.

$('.button').bind('touchstart', function(e){
    e.stopPropagation();
    // do something...
});

hope it helps,

Tom

Vibration

if you stop the event on touchstart i think you break scrolling. though this is probably the best solution – Glazing

you can stop the propagation on touchend then and do wahtever you need to do on touchstart - from what I remember the input gets focus on touchend rather then touchstart so it should solve the problem. – Vibration

Answer 2

My colleagues and I developed an open source library called FastClick for getting rid of the click delay in Mobile Safari. It converts touches to clicks and handles those special cases for input and select elements cleanly.

It's as easy as instantiating it on the body like so: new FastClick(document.body), then listening for click events as usual.

Ashcraft

Hi! Love your FastClick script! Just discovered it. However I'm having a problem with inputs : iPad's keyboard springs up and immediately hides again when I focus on an input... Any idea why? – Wham

What browser, device, OS and version is it running on? – Ashcraft

Hey thanks for the concern. It's an iPad (first version) under iOS5 – Wham

as discussed on your github page, this plugin is quite buggy and doesn't work very well with input fields, etc – Racer

@Racer How about lending a hand? – Ashcraft

@matt, I have in your forum. I beleive you closed the bug issue as having been dealt with when it actually has not. Main bug being: click om input field sometimes executes twice leading to input focus switching automatically – Racer

Answer 3

I see two problems in the question. One is handling the delay in click and the other is handling input focus. Yes, both of these have to be handled properly in mobile web.

1. The delay in click has deeper reasons. The reason for this 300ms delay is explained very well in this article. Responsiveness of the click event.

   Thankfully this problem is well known and solved by many libraries. JQTouch, JQuery Mobile, JQuery.tappable, Mootools-mobile, and tappable

   Most of these libraries create a new event called tap. you can use the tap event similar to the click event. This jquery-mobile event handling might help.

    $("#tappableElement").tap(function(){
      // provide your implementation here. this is executed immediately without the 300ms delay.
    });
   

2. Now, the second problem is with the handling of input focus. There is a noticeable delay here also. This can be solved by forcing focus on the element immediately for one of the touchstart or touchend events. This JQuery event handling might help.

   $('#focusElement').bind('touchstart', function(e){
       $(this).focus();
   });
   
   $('#focusElement').focus(function(e){
       // do your work here.
   });
   

   You can do e.stopPropagation in 'touchstart' event handling to avoid propagation. But I would strongly advise against return false; or e.preventDefault as that would stop default functionality like copy/paste, selecting text etc.

Beera

Answer 4

I made Matt's FastClick a jquery plugin:

stackoverflow link

Just had a comment about the onClick handler being called without the necessary scope being passed. I updated the code to make it work. There also seems to be a problem when input elements lie under the ghost event's position: the focus event gets triggered without being busted.

Wham