touchmove 事件在移动端为什么有时候不触发？

Air-静薇提问于 2026-03-27 09:16:22 阅读 15

移动

我正在做一个移动端的滑动组件，监听了 touchmove 事件，但在某些安卓机上滑着滑着就突然不触发了，特别奇怪。试过 preventDefault 也没用，不知道是不是被浏览器默认行为干扰了？

这是我的简化代码：

element.addEventListener('touchstart', (e) => {
  console.log('start');
});

element.addEventListener('touchmove', (e) => {
  e.preventDefault(); // 试图阻止滚动
  console.log('moving:', e.touches[0].clientX);
});

element.addEventListener('touchend', (e) => {
  console.log('end');
});

我来解答赞 7 收藏

反馈

1 条解答

慕容会静 Lv1

这问题挺常见，特别是在安卓机上。首先你得确保你的 touchmove 事件没被浏览器优化掉。有些安卓机为了性能，会在滚动时暂停一些事件处理。

建议把 preventDefault 放到 touchstart 里试试，这样能更早地阻止默认行为：

element.addEventListener('touchstart', (e) => {

  e.preventDefault();

  console.log('start');

});



element.addEventListener('touchmove', (e) => {

  console.log('moving:', e.touches[0].clientX);

});

另外，检查下 CSS 设置，如果用了 -webkit-overflow-scrolling: touch 可能会影响事件触发。还有个办法是用 passive: false 来加强事件监听器：

element.addEventListener('touchstart', (e) => {

  e.preventDefault();

}, { passive: false });

这个设置能告诉浏览器别太激进地优化你的事件处理，性能上可能有点影响，但至少能保证事件正常触发。实在不行就考虑用 transform 做滑动，性能和稳定性都更好些。

2026-03-27 09:17