移动端点击手势为什么经常误触发？

开发者姿言提问于 2026-03-25 11:49:27 阅读 10

移动

我在做一个移动端的卡片组件，想用 touchstart 和 touchend 来模拟点击事件，但经常轻轻滑动一下也会触发点击，体验很差。

试过用时间差和位移判断，但效果不稳定。比如下面这段逻辑：

let startX, startY, startTime;
el.addEventListener('touchstart', e => {
  const touch = e.touches[0];
  startX = touch.clientX;
  startY = touch.clientY;
  startTime = Date.now();
});
el.addEventListener('touchend', e => {
  const touch = e.changedTouches[0];
  const dx = touch.clientX - startX;
  const dy = touch.clientY - startY;
  const dt = Date.now() - startTime;
  if (Math.abs(dx) < 10 && Math.abs(dy) < 10 && dt < 300) {
    handleClick();
  }
});

可是在某些安卓机上还是容易误触，是不是我的阈值设得不对？或者有更好的方案？

手势识别

我来解答赞 2 收藏

反馈

1 条解答

萌新.文阁 Lv1

我之前也遇到过，试试加个 touchmove 事件监听器，一旦检测到移动超过阈值就取消点击，这样可以提高准确性。比如：

let isTap = true;

el.addEventListener('touchmove', () => { isTap = false; });

el.addEventListener('touchend', e => {

  if (isTap && Math.abs(touch.clientX - startX) < 10 && Math.abs(touch.clientY - startY) < 10 && dt < 300) {

    handleClick();

  }

  isTap = true; // 重置状态

});

2026-03-25 12:19