跳至主要内容

useDoubleClick

雙擊跟蹤

Usage​

即時編輯器

function Demo() {
  const element = useRef<HTMLButtonElement>(null);
  const [text, setText] = useState("未點擊");

  useDoubleClick({
    target: element,
    onSingleClick: () => {
      setText("single click");
    },
    onDoubleClick: () => {
      setText("double click");
    },
  });
  return (
    <div>
      <button ref={element}>點擊我</button>
      <p>{text}</p>
    </div>
  );
};
結果
Loading...

API​

useDoubleClick​

Returns​

void

Arguments​

參數名描述類型預設值
props-UseDoubleClickProps (必填)-

UseDoubleClickProps​

參數名描述類型預設值
targetdom对象BasicTarget<Element> (必填)-
latency延迟时间（毫秒）number | undefined-
onSingleClick单击事件处理函数((e?: MouseEvent | TouchEvent) => void) | undefined-
onDoubleClick双击事件处理函数((e?: MouseEvent | TouchEvent) => void) | undefined-

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;