Quasar offers full-featured Vue directives that can totally replace libraries like Hammerjs: v-touch-pan, v-touch-swipe, v-touch-hold and even v-touch-repeat.

These directives also work with mouse events, not only touch events, so you are able to build cool functionality for your App on desktops too.

We will be describing v-touch-hold directive on the lines below.

Usage

The default wait time is 600ms, but you can change it:

However, you can change this sensitivity too (notice the directive argument below - 600:12:15 - 600ms wait time, 12px sensitivity for touch events, 15px sensitivity for mouse events):

Handling Mouse Events

When you want to also handle mouse events too, use the mouse modifier:

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

Inhibiting TouchHold

When you want to inhibit TouchHold, you can do so by stopping propagation of the touchstart / mousedown events from the inner content:

<div v-touch-hold.mouse="userHasHold">
  <!-- ...content -->
  <div @touchstart.stop @mousedown.stop>
    <!--
      TouchHold will not apply here because
      we are calling stopPropagation() on touchstart
      and mousedown events
    -->
  </div>
  <!-- ...content -->
</div>

However, if you are using capture or mouseCapture modifiers then events will first reach the TouchHold directive then the inner content, so TouchHold will still trigger.

Note on HMR

Due to performance reasons, not all of the modifiers are reactive. Some require a window/page/component refresh to get updated. Please check the API card for the modifiers which are not marked as reactive.