タッチアクションによるクリックイベントの防止

Question

touch-action:pan-y; を含む div があります。 div にはアンカー タグが付けられています。

これで、div をクリックするとリンクが機能し、リダイレクトされます。

ただし、div をスワイプしてスワイプを放し、div をクリックすると、最初のクリックではリンクが機能しませんが、2 回目のクリックでは機能します。

スワイプ完了後の最初のクリックでは、どのクリック イベント ハンドラーも起動されないことがわかりました。

SEO やクローラーを台無しにすることなく、この問題を解決するにはどうすればよいですか。

touch-action:pan-y が必要なのは、ユーザーが div を水平にスワイプしたときに垂直スクロールを防ぐことができるためですが、欠点は、リンクを機能させるためにスワイプ後に 2 回クリックする必要があることです。

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