AlloyFinger手势识别在移动端滑动时触发两次end事件怎么办？

UX毓珂提问于 2026-02-01 14:50:32 阅读 23

移动

我在用AlloyFinger实现移动端左右滑动切换页面时，发现onPanEnd事件会被触发两次，导致页面跳转逻辑混乱。代码检查过事件绑定没重复，但问题依然存在：


const engine = new AlloyFinger(document.body, {
  recognizers: [[AlloyFinger.Pan, { direction: AlloyFinger.DIRECTION_HORIZONTAL }]]
});
engine.on('panend', (e) => {
  console.log('触发次数:', e.direction); // 滑动一次会输出两次方向
  if(e.direction === 2) { // 右滑
    this.prevPage();
  } else if(e.direction === 4) { // 左滑
    this.nextPage();
  }
});

尝试过在事件里加防重标识，但发现两次触发的时间间隔只有几毫秒，可能跟移动端touch事件冒泡有关？求大神指点怎么排查

手势识别

我来解答赞 14 收藏

反馈

2 条解答

博主艺茹 Lv1

这问题我踩过。AlloyFinger的panend触发两次本质是手势识别的“方向冲突”导致的。你的判断方向逻辑没问题，但AlloyFinger内部在识别手势时，会先触发一个“疑似方向”的end，再触发最终方向的end，这在快速滑动时特别明显。

直接优化一下事件处理逻辑：

let isEndHandled = false;



engine.on('panend', (e) => {

  // 过滤掉持续时间太短的误触发

  if (e.deltaTime < 100) return;



  // 防止重复触发

  if (isEndHandled) {

    isEndHandled = false;

    return;

  }



  isEndHandled = true;



  // 延迟执行，留给下一次end事件判断

  requestAnimationFrame(() => {

    if (e.direction === 2) {

      this.prevPage();

    } else if (e.direction === 4) {

      this.nextPage();

    }

    isEndHandled = false;

  });

});

这个方案的核心是：

1. **加了deltaTime判断**，过滤掉不合理的超短滑动
2. **用isEndHandled变量控制**，屏蔽掉第一次误触发
3. **用requestAnimationFrame延迟执行**，保证只响应最终方向

如果你用的是较老版本的AlloyFinger（比如1.x），升级到最新2.x版本也能缓解这个问题，因为官方优化了识别逻辑。如果还是不行，可以考虑换用hammer.js，它对手势识别更稳定。

2026-02-03 06:01

打工人爱丹 Lv1

这个问题有点坑人，不过我之前也遇到过类似的情况。AlloyFinger的事件确实有时候会因为内部机制或者浏览器兼容性问题触发两次。直接给你一个解决办法，拿去改改：

let isEndTriggered = false;



const engine = new AlloyFinger(document.body, {

  recognizers: [[AlloyFinger.Pan, { direction: AlloyFinger.DIRECTION_HORIZONTAL }]]

});



engine.on('panend', (e) => {

  if (isEndTriggered) return;

  isEndTriggered = true;



  console.log('触发次数:', e.direction);

  if (e.direction === 2) { // 右滑

    this.prevPage();

  } else if (e.direction === 4) { // 左滑

    this.nextPage();

  }



  setTimeout(() => {

    isEndTriggered = false;

  }, 50); // 延迟一小会重置标志位，防止快速连续触发

});

原理很简单，加个标志位 isEndTriggered，第一次触发后立刻把它设为 true，然后用 setTimeout 延迟一小会再重置。这样就能避免短时间内多次触发的问题。

如果你还觉得不放心，可以试试把 setTimeout 的时间调到 100ms，基本够用了。移动端这种小坑太多了，习惯就好 😅

2026-02-01 15:02