通过触摸操作防止点击事件-PHP中文网问答

文章专题 AI工具学习下载问答源码最近更新

PHP

会员中心讲师中心微信公众号

通过触摸操作防止点击事件

P粉575055974 2023-09-12 22:06:25

[CSS3讨论组]

1077

我有一个包含 touch-action:pan-y; 的 div 该 div 周围有一个锚标记。

现在，如果您单击该 div，链接将起作用并且您将被重定向。

但是，如果我在 div 上滑动并释放滑动，然后单击该 div，则该链接在第一次单击时将不起作用，但在第二次单击时它将起作用。

事实证明，在滑动完成后第一次单击时，所有单击事件处理程序都不会触发。

我如何解决这个问题而不用 SEO 和爬虫搞乱事情。

我需要 touch-action:pan-y 因为它允许我在用户水平滑动 div 时阻止垂直滚动，但缺点是现在我需要在滑动后单击两次才能使链接正常工作。

有什么解决方案不会给 SEO 带来麻烦吗？

P粉575055974

全部回复(1)

P粉8055354342023-09-13 11:42:54 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();
  }
});