useMousePressed

リアクティブなマウス押下状態。ターゲット要素での mousedown touchstart によってトリガーされ、ウィンドウ上での mouseup mouseleave touchend touchcancel によって解除されます。

基本的な使い方

import { useMousePressed } from '@vueuse/core'

const { pressed } = useMousePressed()

タッチはデフォルトで有効になっています。マウスの変化のみを検出するようにするには、touch を false に設定します。

import { useMousePressed } from '@vueuse/core'
// ---cut---
const { pressed } = useMousePressed({ touch: false })

特定の要素での mousedown と touchstart のみをキャプチャするには、要素の ref を渡して target を指定できます。

<script setup lang="ts">
import { useMousePressed } from '@vueuse/core'
// ---cut---
import { useTemplateRef } from 'vue'

const el = useTemplateRef<HTMLDivElement>('el')

const { pressed } = useMousePressed({ target: el })
</script>

<template>
  <div ref="el">
    この要素をクリックしたときのみ更新がトリガーされます。
  </div>
</template>

コンポーネントの使用法

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