长按指令

Quasar 提供了一系列功能强大的 Vue 触摸指令，可以完全替代 Hammerjs 等第三方手势库。这些指令包括：v-touch-pan、v-touch-swipe、v-touch-hold 和 v-touch-repeat。

这些指令不仅支持触摸事件，还能处理鼠标事件，让您能够在应用中实现丰富的交互体验。

下面我们将详细介绍 v-touch-hold 指令的使用方法。

TouchHold API

用法

默认的长按触发时间为 600ms，您可以根据实际需求调整此值：

您也可以根据具体场景自定义灵敏度值。下面示例中的指令参数 600:12:15 表示：

• 等待时间：600ms
• 触摸事件灵敏度：12px
• 鼠标事件灵敏度：15px

处理鼠标事件

如果您需要同时支持鼠标操作，请添加 mouse 修饰符：

<div v-touch-hold.mouse="userHasHold">...</div>

抑制 TouchHold

您可以通过阻止内部元素的事件冒泡来控制长按事件的触发范围：

<div v-touch-hold.mouse="userHasHold">
  <!-- ...content -->
  <div @touchstart.stop @mousedown.stop>
    <!--
      此处不会触发长按事件，因为我们
      阻止了 touchstart 和 mousedown 事件
      向上冒泡
    -->
  </div>
  <!-- ...content -->
</div>

需要注意的是，如果使用了 capture 或 mouseCapture 修饰符，事件会在捕获阶段就被 TouchHold 指令处理，因此内部元素的长按事件仍会被触发。

TouchHold 触发后的事件

一旦等待时间到达、TouchHold 触发，该指令就会消费掉结束手势的那个事件，这样一次长按就不会同时被当成一次轻触或一次点击——无论作用在元素本身还是它的任意父元素上。对于触摸事件这个事件是 touchend（它默认会触发的模拟 click 也会被一并取消），对于鼠标事件则是 click。

这意味着在 TouchHold 触发之后，元素上的 @touchend 监听器不会被调用。而当用户在等待时间到达之前就抬起手指时，它仍会被调用。如果你两种情况下都需要它，请在捕获阶段监听：

<div v-touch-hold="userHasHold" @touchend.capture="userHasLifted">
  <!-- ...content -->
</div>

鼠标事件不会受到同样的影响：@mousedown 和 @mouseup 始终会被调用，只有随后的 @click 会被抑制。