1---
2category: Sensors
3---
4 
5# useMousePressed
6 
7Reactive mouse pressing state. Triggered by `mousedown` `touchstart` on target element and released by `mouseup` `mouseleave` `touchend` `touchcancel` on window.
8 
9## Basic Usage
10 
11```ts
12import { useMousePressed } from '@vueuse/core'
13 
14const { pressed } = useMousePressed()
15```
16 
17Touching is enabled by default. To make it only detects mouse changes, set `touch` to `false`
18 
19```ts
20import { useMousePressed } from '@vueuse/core'
21// ---cut---
22const { pressed } = useMousePressed({ touch: false })
23```
24 
25To only capture `mousedown` and `touchstart` on specific element, you can specify `target` by passing a ref of the element.
26 
27```vue
28<script setup lang="ts">
29import { useMousePressed } from '@vueuse/core'
30// ---cut---
31import { useTemplateRef } from 'vue'
32 
33const el = useTemplateRef('el')
34 
35const { pressed } = useMousePressed({ target: el })
36</script>
37 
38<template>
39  <div ref="el">
40    Only clicking on this element will trigger the update.
41  </div>
42</template>
43```
44 
45## Component Usage
46 
47```vue
48<template>
49  <UseMousePressed v-slot="{ pressed }">
50    Is Pressed: {{ pressed }}
51  </UseMousePressed>
52</template>
53```
54 
55## Type Declarations
56 
57```ts
58export interface UseMousePressedOptions extends ConfigurableWindow {
59  /**
60   * Listen to `touchstart` `touchend` events
61   *
62   * @default true
63   */
64  touch?: boolean
65  /**
66   * Listen to `dragstart` `drop` and `dragend` events
67   *
68   * @default true
69   */
70  drag?: boolean
71  /**
72   * Add event listeners with the `capture` option set to `true`
73   * (see [MDN](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#capture))
74   *
75   * @default false
76   */
77  capture?: boolean
78  /**
79   * Initial values
80   *
81   * @default false
82   */
83  initialValue?: boolean
84  /**
85   * Element target to be capture the click
86   */
87  target?: MaybeComputedElementRef
88  /**
89   * Callback to be called when the mouse is pressed
90   *
91   * @param event
92   */
93  onPressed?: (event: MouseEvent | TouchEvent | DragEvent) => void
94  /**
95   * Callback to be called when the mouse is released
96   *
97   * @param event
98   */
99  onReleased?: (event: MouseEvent | TouchEvent | DragEvent) => void
100}
101/** @deprecated use {@link UseMousePressedOptions} instead */
102export type MousePressedOptions = UseMousePressedOptions
103export interface UseMousePressedReturn {
104  pressed: ShallowRef<boolean>
105  sourceType: ShallowRef<UseMouseSourceType>
106}
107/**
108 * Reactive mouse pressing state.
109 *
110 * @see https://vueuse.org/useMousePressed
111 * @param options
112 */
113export declare function useMousePressed(
114  options?: UseMousePressedOptions,
115): UseMousePressedReturn
116```
117