⬅️ Back to Table of Contents

📄 useMousePressed

📊 Analysis Summary

Metric	Count
🔧 Functions	3
📦 Imports	9
🟢 Vue Composition API	1
📐 Interfaces	2
📑 Type Aliases	1

📚 Table of Contents

• Imports
• Vue Composition API
• Functions
• Interfaces
• Type Aliases

🛠️ File Location:

📂 packages/core/useMousePressed/index.ts

📦 Imports

Name	Source
ShallowRef	vue
ConfigurableWindow	../_configurable
MaybeComputedElementRef	../unrefElement
UseMouseSourceType	../useMouse
computed	vue
shallowRef	vue
defaultWindow	../_configurable
unrefElement	../unrefElement
useEventListener	../useEventListener

---

Vue Composition API

Name	Type	Reactive Variables	Composables
computed	computed	none	none

---

Functions

useMousePressed(options: UseMousePressedOptions): UseMousePressedReturn

Reactive mouse pressing state.

Parameters:

• options any: No description

See: https://vueuse.org/useMousePressed

Raw JSDoc

/**
 * Reactive mouse pressing state.
 *
 * @see https://vueuse.org/useMousePressed
 * @param options
 */

Calls:

• shallowRef (from vue)
• options.onPressed
• options.onReleased
• computed (from vue)
• unrefElement (from ../unrefElement)
• useEventListener (from ../useEventListener)
• onPressed

Code

export function useMousePressed(options: UseMousePressedOptions = {}): UseMousePressedReturn {
  const {
    touch = true,
    drag = true,
    capture = false,
    initialValue = false,
    window = defaultWindow,
  } = options

  const pressed = shallowRef(initialValue)
  const sourceType = shallowRef<UseMouseSourceType>(null)

  if (!window) {
    return {
      pressed,
      sourceType,
    }
  }

  const onPressed = (srcType: UseMouseSourceType) => (event: MouseEvent | TouchEvent | DragEvent) => {
    pressed.value = true
    sourceType.value = srcType
    options.onPressed?.(event)
  }
  const onReleased = (event: MouseEvent | TouchEvent | DragEvent) => {
    pressed.value = false
    sourceType.value = null
    options.onReleased?.(event)
  }

  const target = computed(() => unrefElement(options.target) || window)

  const listenerOptions = { passive: true, capture }
  useEventListener<MouseEvent>(target, 'mousedown', onPressed('mouse'), listenerOptions)

  useEventListener<MouseEvent>(window, 'mouseleave', onReleased, listenerOptions)
  useEventListener<MouseEvent>(window, 'mouseup', onReleased, listenerOptions)

  if (drag) {
    useEventListener<DragEvent>(target, 'dragstart', onPressed('mouse'), listenerOptions)

    useEventListener<DragEvent>(window, 'drop', onReleased, listenerOptions)
    useEventListener<DragEvent>(window, 'dragend', onReleased, listenerOptions)
  }

  if (touch) {
    useEventListener<TouchEvent>(target, 'touchstart', onPressed('touch'), listenerOptions)

    useEventListener<TouchEvent>(window, 'touchend', onReleased, listenerOptions)
    useEventListener<TouchEvent>(window, 'touchcancel', onReleased, listenerOptions)
  }

  return {
    pressed,
    sourceType,
  }
}

Internal helpers

Declared inside another function in this file.

onPressed(srcType: UseMouseSourceType): (event: MouseEvent | TouchEvent | DragEvent) => void

Parameters:

• srcType UseMouseSourceType

Returns: (event: MouseEvent | TouchEvent | DragEvent) => void

Code

(srcType: UseMouseSourceType) => (event: MouseEvent | TouchEvent | DragEvent) => {
    pressed.value = true
    sourceType.value = srcType
    options.onPressed?.(event)
  }

onReleased(event: MouseEvent | TouchEvent | DragEvent): void

Parameters:

• event MouseEvent | TouchEvent | DragEvent

Returns: void

Calls:

• options.onReleased

Code

(event: MouseEvent | TouchEvent | DragEvent) => {
    pressed.value = false
    sourceType.value = null
    options.onReleased?.(event)
  }

---

Interfaces

UseMousePressedOptions

Interface Code

export interface UseMousePressedOptions extends ConfigurableWindow {
  /**
   * Listen to `touchstart` `touchend` events
   *
   * @default true
   */
  touch?: boolean

  /**
   * Listen to `dragstart` `drop` and `dragend` events
   *
   * @default true
   */
  drag?: boolean

  /**
   * Add event listeners 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

  /**
   * Callback to be called when the mouse is pressed
   *
   * @param event
   */
  onPressed?: (event: MouseEvent | TouchEvent | DragEvent) => void

  /**
   * Callback to be called when the mouse is released
   *
   * @param event
   */
  onReleased?: (event: MouseEvent | TouchEvent | DragEvent) => void
}

Properties

Name	Type	Optional	Description
touch	boolean	✓	not shown
drag	boolean	✓	not shown
capture	boolean	✓	not shown
initialValue	boolean	✓	not shown
target	MaybeComputedElementRef	✓	not shown
onPressed	(event: MouseEvent \| TouchEvent \| DragEvent) => void	✓	not shown
onReleased	(event: MouseEvent \| TouchEvent \| DragEvent) => void	✓	not shown

UseMousePressedReturn

Interface Code

export interface UseMousePressedReturn {
  pressed: ShallowRef<boolean>
  sourceType: ShallowRef<UseMouseSourceType>
}

Properties

Name	Type	Optional	Description
pressed	ShallowRef<boolean>	✗	not shown
sourceType	ShallowRef<UseMouseSourceType>	✗	not shown

---

Type Aliases

MousePressedOptions

/* @deprecated use {@link UseMousePressedOptions} instead /

type MousePressedOptions = UseMousePressedOptions;

---

Generated by Syntax Scribe