useMousePressed

跟蹤滑鼠按下狀態

useMousePressed 追蹤滑鼠或觸控按壓狀態，回傳一個布林值指示使用者是否正在按壓，以及輸入來源類型（滑鼠、觸控或拖曳）。可選地傳入一個目標元素的 ref 以限定追蹤範圍。此 hook 處理滑鼠按鈕、觸控開始/結束和拖曳事件。

使用場景

• 建構在按壓期間改變外觀的互動式元素（例如按鈕按壓效果）
• 實作需要追蹤按壓/釋放狀態的繪圖或塗鴉功能
• 區分不同的輸入來源（滑鼠、觸控、拖曳）以提供差異化回饋

注意事項

• SSR 安全：在伺服器端渲染時，按壓狀態回傳 false，來源類型回傳 null。伺服器上不會附加事件監聽器。
• 輸入來源：預設追蹤滑鼠、觸控和拖曳事件。可透過 touch 和 drag 選項停用觸控或拖曳追蹤。
• 相關 hooks：另請參閱 useMouse 追蹤游標位置，以及 useLongPress 偵測長按手勢。

Usage

function Demo() {
  const [mouse, type] = useMousePressed();

  return (
    <div>
      <p>按下狀態：{JSON.stringify(mouse)}</p>
      <p>來源類型：{JSON.stringify(type)}</p>
    </div>
  );
};

API

useMousePressed

Returns

readonly [boolean, UseMousePressedSourceType]: 包含以下元素的元組：

• 滑鼠是否按下。
• 按下的事件來源。

Arguments

UseMousePressedOptions

UseMousePressedSourceType

Type

export type UseMousePressedSourceType = 'mouse' | 'touch' | null

BasicTarget

export type BasicTarget<T extends TargetType = Element> = (() => TargetValue<T>) | TargetValue<T> | MutableRefObject<TargetValue<T>>;

TargetValue

type TargetValue<T> = T | undefined | null;

TargetType

type TargetType = HTMLElement | Element | Window | Document | EventTarget;