long press and swiping often produces undesired "clicks" about fastclick

[mattcg]

often if i am quickly scrolling down a long page, if i happen to be on a link when lifting my finger it will interrupt me and proceed to the link.

That sounds like a bug - if the page has moved more than a certain amount then the touch should be cancelled. Could you show me a test case please?

also, if i long press on a link to get the 'open in a new window ' dialog, lifting off the link to pick an option immediately just takes me to the link.

I wonder if there's any way to tell when that dialog is open. What device/OS/browser were you running?

[chrickso]

this is on a galaxy s3, both stock and chrome browsers. hopefully something here can help to disable the upclick after a long press: stackoverflow.com/questions/4324362/detect-touch-press-vs-long-press-vs-movement

[mattcg]

I think the fix for the second issue is to not send the synthesised click after the browser's click event fires. Patch coming up.

[redstrike]

I want to report this bug too.

1. Long press and swiping often produces undesired "clicks"
2. Swype / Scroll (ex: up or down) seem slower and only scrolling in a short distance. I mean when not using Fastclick, a quick and long swype of mine come with fast speed and long distance scrolling, but now is not, no matter how quick and distance of my swype, the scroll can be moved in a short distance.

Tested with: iPhone 4S, Galaxy S with Android 4.1.2 default browser, Galaxy S3 default browser

[scrappyTURTLEcom]

I found a solution for this problem, at least for my use:
on iOS devices, when a div in the page scrolls, the touchMove never fires during scroll, then when the finger is lifted at the end of the scroll, if there is a link in that spot, the touchEnd fires the link... This problem exists if the scrolling div is at least nearly twice the height of the screen.

What I did to solve the issue, I added the following codes to the onTouchEnd routine at line 353 to check if the touch was already moved prior to onTouchEnd call, if so cancel the touchEnd:

if (Math.abs(touch.pageX - this.touchStartX) > 10 || Math.abs(touch.pageY - this.touchStartY) > 10) {
        event.preventDefault();
        return false;
}

so the new onTouchEnd routine starts like this now:

FastClick.prototype.onTouchEnd = function(event) {
'use strict';
var forElement, trackingClickStart, targetElement = this.targetElement, touch = event.changedTouches[0];

if (!this.trackingClick) {
    return true;
}
if (Math.abs(touch.pageX - this.touchStartX) > 10 || Math.abs(touch.pageY - this.touchStartY) > 10) {
        event.preventDefault();
        return false;
}

.
.
.
.
.
.

SO FAR THIS IS WORKING IN MY APP

Soheil Shamseddin

[mattcg]

@scrappyTURTLEcom Thanks for that, but I can't reproduce the issue. What version of FastClick and what platform are you running and how are you able to reproduce the issue?

[scrappyTURTLEcom]

I'm running Xcode 4.5, iOS 6.0, fastclick version 0.4.6... I have a native app that handles all in-app purchases with bridge that communicates with the webApp running in UIwebView, which handles navigations and server side dynamic image creation.

The scrolling problem only occurs on long scrolls on iPhone and iPad... See the attached image, if my scrolling div for any of the menu items, has 10 (2 column of 5's) or less thumbnails, everything works perfectly, but if I have 12 or more thumbnails then touchMove for some reason never fires, so every scroll behaves like touchEnd.

I can reproduce the problem consistently.

[forberg]

I can also confirm this issue on Samsung Galaxy S2, in Firefox Mobile, Chrome and native Android.
Many users use long press to get context menu for opening in a new tab, or bookmark or something.
The user will get the context menu, but when the long press ends, the pressed link will start to load in the current window / tab.

Any fixes for this? Adding "needsclick" class doesn't help.

[scrappyTURTLEcom]

In my case, I made a work around... I posted the code change in my last post.

Sent from my iPhone

On Mar 13, 2013, at 4:31 PM, supermads [email protected] wrote:

I can also confirm this issue on Samsung Galaxy S2, in Firefox Mobile, Chrome and native Android.
Many users use long press to get context menu for opening in a new tab, or bookmark or something.
The user will get the context menu, but when the long press ends, the pressed link will start to load in the current window / tab.

Any fixes for this? Adding "needsclick" class doesn't help.

—
Reply to this email directly or view it on GitHub.

[jiyee]

I found a workaround, bind touchmove and detect clientX/clientY distance.

FastClick.prototype.onTouchMove = function(event) {
    'use strict';
    var targetElement, touch, selection;

    targetElement = this.getTargetElementFromEventTarget(event.target);
    touch = event.targetTouches[0];

    if (!this.trackingClick) {
        return true;
    }

    if (Math.abs(touch.clientX - this.touchStartClientX) > 10 || Math.abs(touch.clientY - this.touchStartClientY) > 10) {
        this.trackingClick = false;
        this.targetElement = null;
    }

    return true;
};

[mattcg]

Unfortunately binding a touchmove listener in Webkit affects hardware accelaration and results in jerky animation.

[scrappyTURTLEcom]

I released my app with my work around, mentioned above, 3 versions later, still no problems.

[matthew-andrews]

I think this is now fixed.