Click in next page problem

[ankrawjan]

Hello there,

I m working on a app for android targetting version 2.2 and using samsung galaxy tab device. My problem is with using fastclick library when i tap on some link if next page has some link on the same position then next page link gets invoked automatically. Is there any solution for this i need it immediately.

Thanx

[mattcg]

I think I understand the problem but it'd be a bit difficult to fix it without a test case. Maybe you could create a jsfiddle?

[ankrawjan]

Hello

I donot know how to create fiddle . The library is doing well when the other page has some loading things and ui is generated after some time when data is loaded. But when next page does have simple ui that displayed instantly the click event occurs on next page. When there is any link on that position(same as the previous page link) the next page link gets clicked automatically.

Here is my code like

I have simple html page as first page.The fastclick library is included. The library is instantiated using

window.addEventListener('load', function () { new FastClick(document.body); }, false);

Next page is also simple html page without including fastclick library.

http://jsfiddle.net/ankrawjan/K3MAa/1/ --- first page

http://jsfiddle.net/ankrawjan/3sKJY/ --- login page

on clicking add an obituary on first page login page comes and if login button is on the same position then it gets cliked automatically.

Please help.

[bennybennet]

Same issue here, but with Android 4.3. My first guess is that if you're not developing a single page app, e.g. linking from index.html to page2.html, fastclick doesn't surpress the native (300ms delayed) click event on page2.html.

Edit: I added a quick and dirty snipped and it works:

var listener = function (event) {
        event.stopImmediatePropagation();
        event.preventDefault();
    };
    window.addEventListener('click', listener, false);
    setTimeout(function(){
        window.removeEventListener('click', listener, false);
    }, 300);

[guillerodriguez]

I am seeing the same issue on a Samsung Galaxy SIII Mini with Android 4.1.2. The problem happens when clicking on a link that takes you to another page (this is not a single page application). The new page gets a click event at the same coordinates.

This is probably a duplicate of https://github.com/ftlabs/fastclick/issues/130

[atuttle]

My understanding is that when a tap occurs, two events are fired: the touch event that FastClick listens for (which is broadcast immediately), and 300ms later the click event that is resulting in this "ghost click" experience. Since you're listening for the touch event, you can't cancel the click event (they are distinct events).

The problem is that the click event doesn't fire for the element that was touched, it fires for whatever element is at the touch [x,y] coordinates after the 300ms delay has passed. If the target of both events were the same element, then you could simply listen for both events and ignore the click:

$('.fastclick').on('tap,click', function(e){
    if (e.type === 'click') return;
    //now your touch handler code: ...
});

Indeed, this approach works if your touch-event handler doesn't cause the page to move or any new elements to be displayed over the same [x,y] coordinates.

But if the touch event handler causes a transition (e.g. scroll to a different area of the page, open a new page, show an overlay or dialog window, etc) and this is completed before the 300ms delay completes, and there is a new element under the [x,y] coordinates that were touched then the click event runs for this new element. If this new element has a click handler, then you see a "ghost click."

The only solution I've found thus far is simply to suffer the 300ms delay and use click events when the resulting action could potentially cause a "ghost click."

[Hao-Wu]

@atuttle 's descript about "ghost click" is clear. I am still suffering the "ghost click" with latest FastClick. So do we have any workaround?

[jscottnz]

Hi all.

I think that this is to do with dynamic sites/apps where javascript might generate html content, and a second FastClick instance is bound to the new html

I have this problem with an angular site that creates content from a template then binds the new content to a FastClick handler.

I have created a pull request #279

[TuiKiken]

@jscottnz, thanks.

Require merge!!!