Take the 2-minute tour ×

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)

share|improve this question

4 Answers 4

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){
    // do something...

hope it helps,


share|improve this answer
if you stop the event on touchstart i think you break scrolling. though this is probably the best solution –  benmmurphy Feb 1 '11 at 13:46
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. –  Tom Tu Feb 1 '11 at 14:27

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.

share|improve this answer
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? –  Armel Larcier Oct 19 '12 at 8:50
What browser, device, OS and version is it running on? –  Matt Oct 20 '12 at 23:28
Hey thanks for the concern. It's an iPad (first version) under iOS5 –  Armel Larcier Oct 21 '12 at 18:44
as discussed on your github page, this plugin is quite buggy and doesn't work very well with input fields, etc –  Jonathan Dec 2 '12 at 19:48
@Jonathan How about lending a hand? –  Matt Dec 3 '12 at 13:00

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.

share|improve this answer

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.

       // 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){
        // 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.

share|improve this answer

Your Answer


