Cegah peristiwa klik dengan tindakan sentuh

Question

Saya mempunyai div yang mengandungi touch-action:pan-y; Div mempunyai tag sauh di sekelilingnya.

Sekarang jika anda mengklik pada div itu, pautan akan berfungsi dan anda akan diubah hala.

Namun, jika saya meleret pada div dan melepaskan leretan, kemudian klik pada div, pautan tidak akan berfungsi pada klik pertama, tetapi ia akan berfungsi pada klik kedua.

Ternyata tiada pengendali acara klik menyala pada klik pertama selepas leretan selesai.

Bagaimana cara saya menyelesaikan masalah ini tanpa mengacaukan perkara dengan SEO dan perangkak.

Saya memerlukan touch-action:pan-y kerana ia membolehkan saya menghalang penatalan menegak apabila pengguna meleret div secara mendatar, tetapi kelemahannya ialah sekarang saya perlu mengklik dua kali selepas leret untuk mendapatkan pautan berfungsi.

Adakah terdapat sebarang penyelesaian yang tidak akan menyebabkan masalah untuk 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();
  }
});