useMousePressed

カテゴリ

センサー

エクスポートサイズ

679 B

最終変更日

先週

反応型のマウス押下状態。ターゲット要素の`mousedown` `touchstart`でトリガーされ、ウィンドウの`mouseup` `mouseleave` `touchend` `touchcancel`で解除されます。

デモ

ソースコード

pressed: false
sourceType: null

トラッキング対象

基本的な使用方法

JavaScript

import { useMousePressed } from '@vueuse/core'

const { pressed } = useMousePressed()

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

JavaScript

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

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

Vue

<script setup>
const el = ref(null)

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

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

コンポーネントの使用

この関数は、`@vueuse/components`パッケージを介してレンダーレスコンポーネントバージョンも提供します。使用方法の詳細はこちら。

Vue

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

型定義

型定義を表示

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
  /**
   * Add event listerners with the `capture` option set to `true`
   * (see [MDN](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#capture))
   *
   * @default false
   */
  capture?: boolean
  /**
   * Initial values
   *
   * @default false
   */
  initialValue?: boolean
  /**
   * Element target to be capture the click
   */
  target?: MaybeComputedElementRef
}
/**
 * Reactive mouse pressing state.
 *
 * @see https://vueuse.dokyumento.jp/useMousePressed
 * @param options
 */
export declare function useMousePressed(options?: MousePressedOptions): {
  pressed: Ref<boolean, boolean>
  sourceType: Ref<UseMouseSourceType, UseMouseSourceType>
}
export type UseMousePressedReturn = ReturnType<typeof useMousePressed>