0

When using MrMaksimize and Alex Blacks implementation of Google FastButton I get two clicks in iOS.

Try this fiddle: http://jsfiddle.net/Cotten/zQsVZ/

var a = new FastButton(document.getElementById('a'), function() {
 alert('click');
});

<div id="a">First click me</div>
<div id="b">Then, click here and nothing should happen... but it does :(</div>
  • zoom in on the results pane
  • click the green button, which shows an alert
  • press ok, everything looks fine
  • then click the red or the blue div, which do not have the FastButton(..)
  • it fires the alert again :(

I get this wrong behavior on iPhone 4S iOS 6 and iPad 3 with iOS 5.1.

On android it seems to work.

I get the same weird behavior with jquery.tappable.js.

Thanks!

Cotten
  • 8,787
  • 17
  • 61
  • 98

2 Answers2

0

I'm having a similar issue here.

I was able to fix it by using this solution:

var clickObject = {
    flag: false,
    isAlreadyClicked: function () {
        var wasClicked = clickObject.flag;
        clickObject.flag = true;
        setTimeout(function () { clickObject.flag = false; }, 100);
        return wasClicked;
    }
};
var a = new FastButton(document.getElementById('a'), function() {
    if (!clickObject.isAlreadyClicked()) {
        alert('click');
    } else {
        return;
    }
});

I'm not sure if it will work with your fast button implementation, but it's worth a shot. My implementation look more like this:

$('#container').on('click touchstart', 'a.element', function(event) {
    if (!clickObject.isAlreadyClicked()) {
        alert('click');
    } else {
        return;
    }
});

Best of luck!

Community
  • 1
  • 1
haddnin
  • 550
  • 4
  • 10
0

I think the FastButton implementation already prevents the Ghostclick (timeout of a few milliseconds).

I had the same problem, as I think the problem might be in the fact that you're using and alert (as I was). For some reason (I haven't dived deep into the code), you get another event fired because of the alert. If you're only trying the code out, use "console.log" which is non-blocking instead of alert, and you might see that this second event does not get called.

Hopefully the idea is not to use the alert command, but if it is, use it with a timeout, which works around the implementation of ghostclick, which is what i think is breaking the behaviour anyway:

new FastButton(document.getElementById('a'), function() { 
       setTimeout('alert("hello");',500);
});

Hope it helps.

Cheers, Miguel

mhcarneiro
  • 108
  • 1
  • 6