Touch Hold Directive

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.

Installation


// quasar.conf.js

return {
  framework: {
    // not needed if using auto-import feature:
    directives: [
      'TouchHold'
    ]
  }
}

Usage

Basic



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

Custom wait time



TIP

TouchHold also has a default sensitivity of 5px for touch events and 7px for mouse events, which means that it allows a slight movement of the finger or mouse without aborting, improving the user experience.

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):

Custom sensitivity



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, when doing HMR updates, the modifiers are NOT updated, so you will require a window refresh.

API