⌈Vue3&React18⌋动手实践构建组件库之❣️hooks-useClickOutside❣️

介绍

监听指定元素外部的点击

呈现

Vue3 实现

import { onMounted, onUnmounted } from 'vue';
export function useEventListener<K extends keyof DocumentEventMap>(
  target: Document,
  event: K,
  callback: (event: DocumentEventMap[K]) => void,
  options?: boolean | AddEventListenerOptions
) {
  onMounted(() => target.addEventListener(event, callback, options));
  onUnmounted(() => target.removeEventListener(event, callback, options));
}

import { Ref } from 'vue';
import { useEventListener } from './useEventListener';

export function useClickOutside(ref: Ref, handler: (event: MouseEvent) => void) {
  const listener = (event: MouseEvent) => {
    if (!ref.value || ref.value.contains(event.target as HTMLElement)) return;

    handler(event);
  };
  useEventListener(document, 'click', listener);
  return;
}

React 实现

import { RefObject, useEffect } from 'react';

function useClickOutside(ref: RefObject<HTMLElement>, handler: (event: MouseEvent) => void) {
  useEffect(() => {
    const listener = (event: MouseEvent) => {
      if (!ref.current || ref.current.contains(event.target as HTMLElement)) return;

      handler(event);
    };
    document.addEventListener('click', listener);
    return () => {
      document.removeEventListener('click', listener);
    };
  }, [ref, handler]);
}

export default useClickOutside;

后记

个人博客 | Botaoxy (chengbotao.github.io)
chengbotao (Chengbotao) (github.com)

感谢阅读,敬请斧正!