Skip to content

useMousePressed

Category
Last Changed
7 months ago

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

Demo

pressed: false
sourceType: null
Tracking on

Basic Usage

import { useMousePressed } from '@vueuse/core'

const { pressed } = useMousePressed()
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 })
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>
<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 Usage

This function also provides a renderless component version via the @vueuse/components package. Learn more about the usage.

<UseMousePressed v-slot="{ pressed }">
  Is Pressed: {{ pressed }}
</UseMousePressed>
<UseMousePressed v-slot="{ pressed }">
  Is Pressed: {{ pressed }}
</UseMousePressed>

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 https://vueuse.org/useMousePressed
 * @param options
 */
export declare function useMousePressed(options?: MousePressedOptions): {
  pressed: Ref<boolean>
  sourceType: Ref<MouseSourceType>
}
export declare type UseMousePressedReturn = ReturnType<typeof useMousePressed>
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 https://vueuse.org/useMousePressed
 * @param options
 */
export declare function useMousePressed(options?: MousePressedOptions): {
  pressed: Ref<boolean>
  sourceType: Ref<MouseSourceType>
}
export declare type UseMousePressedReturn = ReturnType<typeof useMousePressed>

Source

SourceDemoDocs

Contributors

Anthony Fu
wheat
MinatoHikari
Marshall Thompson
Shinigami
Alex Kozack

Changelog

v6.4.0 on 9/17/2021
e557f - feat: added 'as' prop to renderable components (#742)
useMousePressed has loaded