Empêcher les événements de clic avec des actions tactiles

Question

J'ai un div contenant touch-action:pan-y; Le div est entouré d'une balise d'ancrage.

Maintenant, si vous cliquez sur ce div, le lien fonctionnera et vous serez redirigé.

Cependant, si je glisse sur un div et relâche le balayage, puis clique sur le div, le lien ne fonctionnera pas au premier clic, mais il fonctionnera au deuxième clic.

Il s'avère qu'aucun des gestionnaires d'événements de clic ne se déclenche au premier clic une fois le balayage terminé.

Comment résoudre ce problème sans gâcher les choses avec le référencement et les robots d'exploration.

J'ai besoin de touch-action:pan-y car cela me permet d'empêcher le défilement vertical lorsque l'utilisateur fait glisser le div horizontalement, mais l'inconvénient est que je dois maintenant cliquer deux fois après le balayage pour que le lien fonctionne.

Existe-t-il des solutions qui ne poseront pas de problèmes pour le référencement ?

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();
  }
});