I have the following attached to an href tag:
$('body').on('click', '.classidentifier', function(e)
{
DoSomething();
});
The DoSomething() function includes an incrementing loop that's supposed to fire six times:
var DoSomething = function() {
if (ClickCounter < 6) {
ClickCounter++
DoSomethingElse();
};
if (ClickCounter == 6 ){
BailYouAreDone();
ClickCounter = 0; }
}
All worked fine in a browser environment with actual mouse clicks. It also worked fine in a compiled PhoneGap app.
But I was sick of the 300ms lag that .on('click') events incur in a touchscreen environment, so I installed the FastClick.js library, which monitors for the touchend event and sends a synthetic click to .on('click') events.
But now the DoSomethingElse() function fires > 6 times: sometimes 7, sometimes 8, sometimes more, seemingly dependent on how fast I press the href link. I've tried trapping for ClickCounter > 6 in the DoSomethingElse() routine, but no joy. What am I doing wrong?
Elsewhere here there is a tip on ensuring that .on('click') events only fire once:
$(element).off().on('click', function() {
// function body
});
Try that.