在子元素中禁用 Vuetify v-touch答案

【问题标题】：Disable Vuetify v-touch in a child element在子元素中禁用 Vuetify v-touch
【发布时间】：2019-06-23 17:20:20
【问题描述】：

我正在使用 Vuetify，我想在用户向左或向右滑动时执行一些代码。我有一个这样的容器：

<div
    v-touch="{
      left: () => next(),
      right: () => back()
    }"
  >
<!-- other html -->
</div>

问题是这个容器有另一个元素，它的文本必须水平滚动。在电话上，当我滑动以滚动此文本时，容器 v-touch 指令也捕获了滑动，即使它不应该也会继续。如果那个孩子被刷了，我怎么能说什么也不做？是否有目标参数或类似的东西？

【问题讨论】：

标签： vue.js vuejs2 vuetify.js

【解决方案1】：

您可以停止要排除的元素上的触摸事件，这样v-touch 指令就不会获取发生在要排除的元素上或内部的事件。

<div
  v-touch="{
    left: () => next(),
    right: () => back()
  }"
>
  <div
    @touchstart.native.stop
    @touchmove.native.stop
    @touchend.native.stop
  >
    ...non swipable content
  </div>
  ..swipable content
</div>

【讨论】：