VueUseuseMousePressed
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
js
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
js
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.
html
<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/componentspackage. Learn more about the usage.
html
<UseMousePressed v-slot="{ pressed }">
Is Pressed: {{ pressed }}
</UseMousePressed>
<UseMousePressed v-slot="{ pressed }">
Is Pressed: {{ pressed }}
</UseMousePressed>
Type Declarations
typescript
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
Contributors
Anthony Fu
wheat
MinatoHikari
Marshall Thompson
Shinigami
Alex Kozack