Verhindern Sie Klickereignisse mit Touch-Aktionen

Question

Ich habe ein Div, das touch-action:pan-y; enthält Das Div ist von einem Ankertag umgeben.

Wenn Sie nun auf dieses Div klicken, funktioniert der Link und Sie werden weitergeleitet.

Wenn ich jedoch über ein Div wische und den Wisch loslasse und dann auf das Div klicke, funktioniert der Link nicht beim ersten Klick, aber beim zweiten Klick.

Es stellt sich heraus, dass keiner der Click-Event-Handler beim ersten Klick nach Abschluss des Wischens ausgelöst wird.

Wie löse ich dieses Problem, ohne SEO und Crawler durcheinander zu bringen?

Ich benötige touch-action:pan-y, weil ich damit vertikales Scrollen verhindern kann, wenn der Benutzer das Div horizontal wischt, aber der Nachteil ist, dass ich jetzt nach dem Wischen zweimal klicken muss, damit der Link funktioniert.

Gibt es Lösungen, die der Suchmaschinenoptimierung keine Probleme bereiten?

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