VueUse
pressed: false
sourceType: null
Tracking on
Drop something here to try drag and drop.

useMousePressed

Reactive mouse pressing state. Triggered by mousedown touchstart on target element and released by mouseup mouseleave touchend touchcancel on window.

Basic Usage

import { useMousePressed } from '@vueuse/core'

const { pressed } = useMousePressed()

Touching is enabled by default. To make it only detects mouse changes, set touch to false

const { pressed } = useMousePressed({ touch: false })

To only capture mousedown and touchstart on specific element, you can specify target by passing a ref of the element.
















 
 
 
 
 




<template>
  <div ref="el">
    Only clicking on this element will trigger the update.
  </div>
</template>

<script>
import { ref } from 'vue'
import { useMousePressed } from '@vueuse/core'

export default {
  setup() {
    const el = ref(null)

    const { pressed } = useMousePressed({ target: el })

    return {
      el,
      pressed,
    }
  }
})
</script>

Component

<UseMousePressed v-slot="{ pressed }">
  Is Pressed: {{ pressed }}
</UseMousePressed>
Learn more about component usage

Type Declarations

export interface MousePressedOptions extends ConfigurableWindow {
  /**
   * Listen to `touchstart` `touchend` events
   *
   * @default true
   */
  touch?: boolean
  /**
   * Listen to `dragstart` `drop` and `dragend` events
   *
   * @default true
   */
  drag?: boolean
  /**
   * Initial values
   *
   * @default false
   */
  initialValue?: boolean
  /**
   * Element target to be capture the click
   */
  target?: MaybeElementRef
}
/**
 * Reactive mouse position.
 *
 * @see /useMousePressed
 * @param options
 */
export declare function useMousePressed(options?: MousePressedOptions): {
  pressed: Ref<boolean>
  sourceType: Ref<MouseSourceType>
}
export declare type UseMousePressedReturn = ReturnType<typeof useMousePressed>

Source

Source • Demo • Docs