移动端手势滑动时 touchmove 事件不触发怎么办？

设计师楚萓提问于 2026-03-15 05:55:20 阅读 44

交互

我在做一个移动端的滑动组件，监听了 touchstart 和 touchmove 事件，但发现有时候手指滑动了，touchmove 根本没触发，只触发了 touchstart 和 touchend。我试过在 touchstart 里加 event.preventDefault()，但还是不行。

这是我的监听代码：

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

element.addEventListener('touchmove', (e) => {
  console.log('move'); // 这行经常不执行
});

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

是不是被浏览器默认行为拦截了？该怎么解决？

Touch事件手势操作

我来解答赞 10 收藏

反馈

1 条解答

Prog.慧娇 Lv1

这个问题很常见，不是浏览器拦截了，而是浏览器默认的滚动行为优先级更高，滑动时系统认为你要滚动页面，就不触发元素的 touchmove 了。

解决办法有两个：

第一种，监听时加上 passive: false：

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

  e.preventDefault();

}, { passive: false });



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

  console.log('move');

}, { passive: false });

passive: false 是关键，默认是 true（浏览器会优化滚动性能，直接忽略你的 preventDefault），改成 false 才能让阻止默认行为生效。

第二种，更省事，直接上 CSS：

element {

  touch-action: none;

}

这个属性告诉浏览器"这个元素不需要滚动"，浏览器就不会抢你的 touchmove 事件了。

两种方案二选一就行，推荐 CSS 方案，代码更干净。在 WP 主题或者插件里写个简单的 CSS 类或者内联样式都随你。

2026-03-17 08:04