Touch when scrolling


#1

I have a strange problem. When I start scrolling in my app and then stop it (with a touch) on a link, it opens that link. But it shouldn’t as I only wanted to stop the scrolling.
Any ideas how to solve that?


#2

Framework7 handles this case to prevent link open on quick touch during scrolling. Where do you see this, cordova app or browser? what is the device and OS version?


#3

I get this problem when I test the app with the PhoneGap app and on iPhone X (iOS 11.3)


#4

Thank you for your reply @nolimits4web

I made a little video to demonstrate the problem:

When I stop the scrolling with a tap it opens the link. :frowning:


#5

Just an idea - what I normally in similar issues like this.

Trigger on event that is fired when the scrolling is over (I would assume touchtend) and ignore all click events for e.g. 100ms (status is keept in a variable which is changed after 100ms).

Up to now it worked pretty fine for me…


#6

Thanks Andreas, I tried that but no luck :frowning: Do you have a code snippet for that? That would be amazing!


#7

Something like (#page -> <div class="page-content" id="page">)

   var acceptClick = true;

   $('#page').on('touchend', function() { 
      acceptClick = false;
      console.info("touchend -> acceptClick = false);
      setTimeout(function() {
         acceptClick = true;
         console.info("acceptClick = true");
      }, 250);

  $('#page ul').on('click', 'li', function() {
       console.info("click event");
       if (acceptClick===false) return false;

       console.info("process click event");
       ....
  });hi

#8

Thanks! I tried that but I don’t know how to temporary disable links. onclick e.preventdefault() doesn’t work


#9

No, the click event still be fired, but depending on the variable acceptClick it is simply ignored.

After 250ms the status is changed and the click events are processed as before.


#10

I tried it but the part “if (acceptClick===false) return;” doesn’t stop the router it seems


#11

Try
return false

I changed the code above. If I remember correctly, the default action (follow link) will not be take place.


#12

Ok that worked now! I’m using on touchstart instead of on click
The problem now: the 250ms pass while the “scroll animation” is still going on. So when I scroll quickly through a long list and stop that scroll animation with a touch > same problem, it triggers the link instead of just stop the scrolling


#13

What’s about touchmove?


#14
      // Scroll Timer
  $('.page-content').scroll(function() {
      hasScrolled = true;        
      clearTimeout($.data(this, 'scrollTimer'));
      $.data(this, 'scrollTimer', setTimeout(function() {
        hasScrolled = false;
      }, 250));
  });

  $('.page-content').on('touchend', function() {
   if (hasScrolled === true ) {
     console.info("click blocked");
     return false;
   }

Ok this seems to improve it a lot:

https://streamable.com/oy68a