Touch/Mouse Hold Action     

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

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 on the lines below.


Edit /quasar.conf.js:

framework: {
directives: ['TouchHold']

Basic Usage

<div v-touch-hold="handler">...</div>

handler“ is a Function which receives an Object as parameter.
Please note that the default “hold” duration is 600ms. This means that your handler function will run after 600ms.

Handler Parameter

The handler function/method is called by the directive when user taps/clicks and holds on the DOM element and it receives the following parameter:

evt, // JS Native Event
position: // {x, y} offset on screen
duration // Number in ms

// example:
handler (obj) {
console.log(obj.position) // {x: 22, y: 451}
console.log(obj.duration) // 600


noMouseAvoid capturing mouse events too.
stopStop event propagation once holding has been detected.
preventPrevent default browser behavior of the event once holding has been detected.

Avoid Capturing Mouse Events

When you don’t want to capture mouse actions too, use the noMouse modifier:

directive won't be triggered by mouse actions;
it's exclusively triggered by touch actions now:
<div v-touch-hold.noMouse="userHasHold">...</div>

Preventing Scroll (on touch capable devices)

By default, the directive does not block page scrolling. If you want to prevent scrolling, then use the prevent modifier.

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

Custom Duration

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