Vue可拖动元素上有点击事件吗

Question

我正在Vue中制作一个Tinder克隆类型的应用程序。我使用的是Vue2InteractionDragable组件。这个组件非常适合这个用例。但我希望在可拖动部分有一个点击事件，它不会触发(因为它将点击解释为拖动的开始，而不是点击事件(。

如果它被点击并放开，我希望它使用点击事件，但如果它被按住超过一定时间，我希望他使用当前的拖动功能。我想不出这样做的方法，所以任何建议都将不胜感激。下面是我正在使用的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()"