Mobile Javascript: Prevent "touchhend" handler if user stops scrolling with a tap

I ran into a problem in mobile JS development: (I'm talking about my problem in iOS, until I can fix my problem, then I'll worry about Android ...)

I have a list of items (iMessage app style like TableView in xCode) that is scrolling, I added an indirect EventListener to this list to determine when the user wants to know more about a single item. I distinguish between scrolling and "faucet" (because scrolling fires a touchhend event) with these EventListeners applied to the document:

    var move = false;
    var startX = 0,
        startY = 0;
    var sameElement;

    document.addEventListener("touchstart", function (event) {

        move = false;
        startX = event.touches[0].clientX;
        startY = event.touches[0].clientY;
        sameElement = event.target;

    });

    document.addEventListener("touchmove", function (event) {

        var X = 10;
        var Y = 10;
        if (sameElement == event.target) {
            X = 120; // Increase abscissa tolerance margin if the move stay on the same element
        }
        if (Math.abs(event.touches[0].clientX - startX) > X ||
            Math.abs(event.touches[0].clientY - startY) > Y) {
            move = true;
        }
    });

      

and then I can ignore this event if the user has scrolled:

someElement.addEventListener("touchend", function (event) {
    if(move) {
         return;
    }
});

      

The problem is, in the iOS natives app (Android too, I think), the user can "stop" a fast scroll with a tap, eg .: If you scroll "fast" in the Facebook messenger app and then tap the screen, the scroll animation will stop. and you will remain in the conversation list.

In my case, if I do this, the touchhend event attached to some element is triggered immediately, I want to change the behavior of my own application (if the user quickly scrolls and directly touches the screen, it stops scrolling and prevents the user from touching the screen again when some- then the element is not scrolling, it will miss the touchhend event ...). I found that iOS automatically stops scrolling if the user touches the screen, but I can't prevent the touchhend event from firing ...

I found an issue on StackOverflow question ... , the guy seems to have found a solution (see edit), I tried it but it doesn't work ... or I don't quite understand what he means.

Thank you so much!

David

+3


source to share





All Articles