为什么我的Vue组件绑定的touchstart事件在移动端没反应？

程序猿一茹提问于 2026-01-26 04:38:40 阅读 56

移动

我在用Vue开发移动端页面时，给按钮绑定了touchstart事件，但用手机测试完全没反应。换成click事件又能正常触发，这是为什么呢？

代码是这样写的：

<template>
  <div @touchstart="handleTouch" style="padding:20px;background:pink">
    滑动我试试
  </div>
</template>
 
<script>
export default {
  methods: {
    handleTouch() {
      console.log('手指按下了！');
    }
  }
}
</script>

已经确认手机浏览器支持触摸事件，其他页面的原生touchstart事件能正常工作。难道Vue有特殊限制吗？

我来解答赞 6 收藏

反馈

2 条解答

上官东成 Lv1

你这个情况其实挺常见的，Vue本身对touchstart没有限制，问题大概率出在移动端浏览器的触摸行为机制上。

现代移动浏览器为了优化点击体验，默认会对某些元素做300ms左右的延迟来判断是否是双击、缩放等操作，同时部分浏览器只对可交互元素（比如button、a标签）自动启用触摸事件响应。你用的div虽然加了padding和背景色，但依然属于普通块级元素，有些机型或浏览器内核可能直接忽略了它的touchstart。

解决办法很简单：给那个div加上 role="button" 或者直接换成button标签，同时确保页面有正确的viewport设置。你可以试试这样改：

<template>

  <button @touchstart="handleTouch" style="padding:20px;background:pink;border:none">

    滑动我试试

  </button>

</template>

另外注意安全，别在touchstart里做敏感操作，比如支付触发之类的，因为touchstart太容易误触了，建议关键操作放在touchend或者click里处理。

如果非得用div，至少加上 tabindex="0" 和 role="button"，让浏览器知道这是个可交互元素，不然真就白屏干瞪眼了。

2026-02-13 08:10

夏侯晓曼 Lv1

touchstart没反应的问题，大概率是事件被阻止了。你试试在方法里加个 e.preventDefault()，很多情况下默认行为会干扰自定义逻辑。

另外，确保没有其他地方写了 touchmove 或 touchend 的阻止代码，这些可能间接影响到 touchstart。

给你的代码稍微改一下，复制过去试试：

<template>

  <div @touchstart="handleTouch" style="padding:20px;background:pink">

    滑动我试试

  </div>

</template>



<script>

export default {

  methods: {

    handleTouch(e) {

      e.preventDefault(); // 加上这一行

      console.log('手指按下了！');

    }

  }

}

</script>

如果还不行，检查下是不是有第三方库或者全局事件拦截了触摸事件。实在不行再找我，这种情况基本都能解决。

2026-01-29 14:32