Fastclick creates incorrect click event on 2nd surface

[trobbertze]

In a mobile browser (tested on Safari mobile) using Fastclick.

When you have the situation where a click event on a surface triggers a second surface to move over the specific surface the second surface will also receive the click event.

Following is a code snippet to reproduce the problem:

require([
      'famous/core/Engine',
      'famous/core/Surface',
      'famous/core/Transform',
      'famous/modifiers/StateModifier',
      'famous/inputs/FastClick'
    ], function(
        Engine,
        Surface,
        Transform,
        StateModifier,
        FastClick){

    var context = Engine.createContext();

    // Create 2 surfaces positioned next to each other.

    var blueSurface = new Surface({
        size: [200, 200],
        properties: {
            border: '1px solid black',
            lineHeight: '200px',
            align: 'middle',
            textAlign: 'center',
            backgroundColor: 'blue'
        },
        content: 'Click me!'
    });

    context.add(blueSurface);

    var redSurface = new Surface({
        size: [200, 200],
        properties: {
            border: '1px solid black',
            lineHeight: '200px',
            align: 'middle',
            textAlign: 'center',
            backgroundColor: 'red'
        }
    });

    redSurface.mod = new StateModifier({
        transform: Transform.translate(200, 0, 0)
    });

    context.add(redSurface.mod).add(redSurface);

    // Set up 2 click events

    // The expected behaviour is that when you click on the blue surface
    // the red surface will move to a position on top of the blue surface.
    // On Safari Mobile, the red surface receives another click event
    // and moves off the blue surface again.  To be clear this is not the
    // required behaviour.

    blueSurface.on('click', function() {
        this.setTransform(Transform.translate(0, 0, 0));
    }.bind(redSurface.mod));

    redSurface.on('click', function() {
        this.setTransform(Transform.translate(200, 0, 0));
    }.bind(redSurface.mod));

});

I cannot reproduce the problem in jsfiddle. I think they are using some kind of a fastclick override.

To overcome this issue I switched to Fastclick from Ftlabs, but that is causing all sorts of problems when using Scrollview where scroll items react to click events.

I realise this is a known issue but there is not currently an open ticket that I am aware of to address the problem.

[MylesBorins]

There are quite a number of issues with the current implementation of fast click... sorry you are having so much trouble. Thanks for making the issue, hopefully we can get to fixing it asasp

[ghost]

+1 for this - having the exact same issue (mobile Safari iOS 8). I also tried to switch to Ftlabs' Fastclick after having used it in the past, but it jacked up all sorts of stuff. any thoughts on a workaround aside from the obvious delaying of moving the second surface into place or not overlaying them at all?

also does anyone else find click events in general on iOS 8 to be more difficult than before? I find myself having to tap on things twice and even three times before anything happens...have my fingers just gotten fatter in the past week?

[speigg]

+1 Very annoying problem... doing it the other way around though: the first (intended) click causes the surface to move out of the way, and then a second (incorrect) click is received by the surface that was beneath the other one.