Prevent click events with touch actions

Question

I have a div containing touch-action:pan-y; The div has an anchor tag around it.

Now if you click on the div, the link will work and you will be redirected.

However, if I swipe on the div and release the swipe, then click on the div, the link will not work on the first click, but it will work on the second click.

It turns out that none of the click event handlers fire on the first click after the swipe is complete.

How do I solve this problem without messing things up with SEO and crawlers.

I need touch-action:pan-y because it allows me to prevent vertical scrolling when the user swipes the div horizontally, but the downside is that now I need to click twice after the swipe to get the link to work.

Are there any solutions that won’t cause trouble for SEO?

Answer 1

How about you;
var div = document.getElementById('myDiv');
var link = document.getElementById('myLink');

var isSwiping = false;

div.addEventListener('touchstart', function(e) {
  isSwiping = false;
});

div.addEventListener('touchmove', function(e) {
  isSwiping = true;
});

div.addEventListener('touchend', function(e) {
  if (!isSwiping) {
    link.click();
  }
});