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

欧阳书圻提问于 2026-03-30 08:30:14 阅读 3

交互

我在做一个移动端的滑动组件，监听了 touchstart 和 touchmove，但发现 touchmove 根本没执行，控制台一点输出都没有。

试过给元素加 touch-action: none，也试过在 touchstart 里调用 event.preventDefault()，还是不行。代码大概是这样：

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

element.addEventListener('touchmove', (e) => {
  console.log('move'); // 这行从来没打印过
});

是不是哪里漏了？iOS 和 Android 都试了，都不行。

Touch事件手势操作

我来解答赞 3 收藏

反馈

1 条解答

萌新.名轩 Lv1

问题出在你把 preventDefault() 放在了 touchstart 里。这会导致浏览器认为你不想要任何默认行为，包括触摸滑动。

在移动端，浏览器对触摸事件的处理比较特殊。当你在 touchstart 里调用 preventDefault()，会影响到后续的 touchmove 事件触发。

试试这样改：

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

  console.log('start');

});



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

  console.log('move');

  e.preventDefault(); // 把它放到这里

});

不过要注意，如果你需要阻止页面滚动，同时又想让 touchmove 生效，可以在 touchmove 里加个判断条件。比如只在特定区域内才调用 preventDefault()。

另外别忘了检查元素的宽高和可点击区域，有时候元素太小或者被其他元素覆盖也会导致事件不触发。做过太多这种坑爹的调试，相信我，先从最基础的地方排查起。

2026-03-30 09:00