Vue可拖动元素，上面有点击事件？

Question

我正在Vue中制作一个Tinder克隆类型的应用程序。我正在使用Vue2InteractDraggable组件。这个组件对于使用案例来说非常好用。但我希望在可拖动部分上有一个点击事件，它不会触发（因为它将点击解释为拖动的开始，而不是点击事件）。

我想让它在被点击并松开的情况下使用点击事件，但又想让它在保持超过一定时间的情况下使用当前的拖动功能。我不知道该怎么做，所以非常感谢任何建议。下面是我使用的Vue组件的一个例子。细节部分的@点击不火。

<Vue2InteractDraggable
        v-if="cardVisible"
        :interact-out-of-sight-x-coordinate="500"
        :interact-max-rotation="15"
        :interact-x-threshold="200"
        :interact-y-threshold="9999"
        @draggedRight="right()"
        @draggedLeft="left()">
        <div class="flex flex--center">
          <img class="profilePicture" style="z-index: 4" :src="getImageSrc(current.image)"/>
        </div>
        <div class="rounded-borders card card--one">
          <div class="userName">{{ Object.keys(this.users)[this.index] }}</div>
          <div class="userAge">Age: {{current.age}}</div>
          <div class="userDetailExpand" @click="expandDetails()">
            <span>User Details</span>
            <img class="carrot" src="../assets/svg/carrot_expand.svg"/>
          </div>
        </div>
      </Vue2InteractDraggable>

如果你能想到什么办法，请告诉我。我被这个问题挂了好久，找不到答案。

谢谢您的帮助。

Answer 1

尝试添加。

@touchstart="expandDetails()"

靠近：

@click="expandDetails()"