Quasar offers full-featured Vue directives that can totally replace libraries like Hammerjs:
v-touch-hold and even
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.
/* * No installation step is necessary. * It gets installed by default by @quasar/app v2+. */
The default wait time is 600ms, but you can change it:
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):
Handling Mouse Events
When you want to also handle mouse events too, use the
When you want to inhibit TouchHold, you can do so by stopping propagation of the
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
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.