Famo.us 'Fastclick' firing two clicks on mobile

Question

I'm using Famo.us's Fastclick by requiring it at the top of one of my main views, like so:

 var FastClick = require('famous/inputs/FastClick');

In iOS7 Safari and Chrome, Fastclick works to kill the 300ms delay but when I click a surface that removes a "covering" surface from the DOM (e.g., a back button), both surfaces -- the surface being removed and the new surface -- receive the click event. So if, for instance, I click a back button on a covering surface, and there's a back button on the surface below it, both back buttons will fire and remove both surfaces.

When I remove FastClick, the problem is solved, but the 300ms delay returns.

I've checked the problem on a desktop and it is not occurring, even when FastClick is present. I've also console.log'd the click events, and they're only firing once. Which suggests that, on mobile, the problem is a result of my finger still being on the glass after the "covering" surface is removed from the DOM.

Any ideas on how to solve?

Answer 1

Figured out how to prevent this.

this.buttonSurface.on('click', function(e){
    if(e.detail != null) return false;
}.bind(this));

Answer 2

I had this exact problem with a menu button that when clicked would bring in an off-canvas menu that had a button right where the first menu button was. Both items would receive the click or "tap" on iOS but not on Android (and not in any desktop browsers). Wasted several hours trying to get the Famo.us fastclick to work because as you say when you disable it the menu works as expected but you will end up with the 300 ms lag.

I ended up using the original fastclick. In my bower.json:

"dependencies": {
    "requirejs": "~2.1.11",
    "almond": "~0.2.9",
    "famous-polyfills": "git+https://github.com/Famous/polyfills.git#0.1.1",
    "famous": "~0.2.1",
    "fastclick": "1.0.2"
  }

In my main app file:

var FastClick     = require('fastclick');

...during init:

FastClick.attach(document.body);