dave1010 / jquery-fast-click

Work around some mobile browser's 300ms delay on the click event.

jQuery fastClick plugin

Work around the 300ms delay for the click event in some mobile browsers (e.g. Android and iOS).

Code based on http://code.google.com/mobile/articles/fast_buttons.html

Homepage: http://dave1010.github.com/jquery-fast-click/

Usage

$('button').fastClick(function() {
  alert('clicked!');
});

Example

See http://jsfiddle.net/p4BhA/4/ for a link that starts loading as soon as you tap on it.

jquery-fast-click's Issues

Dynamically added elements

jQuery allows the .live and .on functions for dynamically added elements to the DOM.

How can i use this ability with .fastClick? It doesn't seem to work out of the box. I will make a small donation for a fix :-)

Break a doubleClick / doubleTap ?

I somehow managed to make your plugin work with xui.js for the time being, and it definitely makes a web app more responsive then the click events.

Everything seems to work great (week or so now) until you "double tap" something. Then all hell breaks loose. Granted, I think very few mobile users are 'double tapping' stuff to navigate around, but even an accidental double-tap can cause the links to break.

I'm not even sure if "double tap" events exist in Webkit, so I'm not really sure what is causing the problem. Would setting the timeout on "preventghostClick" to a lower interval help?

Fix for IE7/8 addEventListener

Replace

document.addEventListener('click', $.clickbuster.onClick, true);

with

    if (document.addEventListener){
      document.addEventListener('click', $.clickbuster.onClick, true); 
    } else if (document.attachEvent){
      document.attachEvent('onclick', $.clickbuster.onClick);
    }

readme.md Example -> fiddle link is a 404

force default click behaviour on desktop browsers

When optimizing webstuff for mobile, we need to get around the 300ms delay by adding fastclick to our buttons. When the same page gets viewed on a desktop browser usually onclick handlers work better, because they are not selecting any text when pressing multiple times (desktop browsers interpret this as doubleclick to select text near the cursor).

Needs list of supported / tested browsers

Use with jQuery '.on()'

Is there a way to call fastClick like the following?

$('.button').on('fastClick', doSomething);

Use with jQuery Mobile

Can't seem to get this to work solidly with jquery mobile, specifically ajax page navigation on iOS. The button does not fully react to touch (changing color), and the page transition appears to start before completely reloading the next page instead of using ajax. Any way to stop fastClick from forcing a full reload on the link? I'm doing this:

$('#page1').live('pageinit', function() {

    $('button').fastClick(function() {
        $.mobile.changePage('page2.html', 'slide', 1, 1);
    });

});

Also, in case anyone else on jquery mobile is having problems, be sure to include the jQuery.fastClick.js file on every page that you transition to using fastClick, even if you are not using a fastClick button on that page. This fixed some other instability problems for me.

Otherwise I do notice the absence of the 300ms delay when I click the button and it works well, I would almost just forget the button effect and transition and use it.

Needs version number and details of jQuery compatability

this variable is Window object

$(".button").fastClick(function() {
console.debug(this.toString());
}

outputs [object Window], when it should output [object HtmlDivElement] (or whatever the button class is defined in). Any help would be appreciated.

Thanks.

Using fastClick method in events object in Backbone-Mobile-App

I have a Backbone app that uses rails API for the CRUD operations that it performs. Backbone views have events object that accepts event, selector and callback function like following:

window.fooView = Backbone.View.extend({
events: {
'click #back_btn': 'fooCallBackFunction'
},
fooCallBackFunction: function() {
// callback function
}
});

Now, I tried changing the first parameter, click to fastClick but it wouldn't work. What would I have to do to make this work?

Not working on mobile browsers

Hi, I've used this 'plugin' to change my chain of events from the browser version of my website. When I test the website using chrome's developper tools and simulating mobile devices, it works like a charm. However, when I view the website on any mobile device on any browser, the click/touch event doesn't seem to get registered. Here is the website link: http://aquaterratest.azurewebsites.net/

Double fires on 1 touch in android browsers

At first it was working ok, but today I noticed it double firing the even on one touch.
Sometimes this effect is even when I use chrome emulator on desktop computer.

Code not removing delay

This code does not seem to prevent delay.
( It does not on ios anyway )

reassigning fastclick doesnt override old handler

hi there

when I have a button that I have a fastclick handler on, and I try to assign a new handler to it, the old one will remain and FastButtons onclick method will trigger twice (the old one and the new one).

This is because we don't unbind the old events when binding new ones. To solve this, we could either just unbind everything from the button before binding again or on the other hand, we might make some sort of .on .off behaviour to it.

what do you think?

Cannot read property '0' of undefined

Attempting to use $.Fastclick to improve the clickspeed on existing links on a HTC desire android 2.2 with the stock browser

$('a, button').fastClick(function() {
alert('clicked!');
});

http://couch.arandomurl.com/couchtasks/_design/couchtasks/fastclick.html

E/browser ( 936): Console: Uncaught TypeError: Cannot read property '0' of undefined http://couch.arandomurl.com/couchtasks/_design/couchtasks/js/jQuery.fastClick.js:57

switching to event.originalEvent.touches gives

E/browser ( 936): Console: Uncaught TypeError: Cannot read property 'clientX' of undefined http://couch.arandomurl.com/couchtasks/_design/couchtasks/js/jQuery.fastClick.js:58

tested with jquery-git and jquery-1.5.2

Needs test suite

Ideally qUnit tests and/or Selenium tests

global replace with click?

A great opt in feature would be to somehow allow all clicks to automatically be replaced by fastClick

Is this possible? Thanks