透過觸控操作防止點擊事件

Question

我有一個包含 touch-action:pan-y; 的 div 該 div 周圍有一個錨標記。

現在，如果您單擊該 div，連結將起作用並且您將被重定向。

但是，如果我在 div 上滑動並釋放滑動，然後單擊該 div，則該連結在第一次單擊時將不起作用，但在第二次單擊時它將起作用。

事實證明，在滑動完成後第一次點擊時，所有點擊事件處理程序都不會觸發。

我如何解決這個問題而不用 SEO 和爬蟲搞亂事情。

我需要 touch-action:pan-y 因為它允許我在用戶水平滑動 div 時阻止垂直滾動，但缺點是現在我需要在滑動後單擊兩次才能使連結正常工作。

有什麼解決方案不會給 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();
  }
});