MouseEvent目标类型

Question

我有一个定制钩子

const hasIgnoredClass = (element: Element, ignoredClass: string) =>
  (element.correspondingElement ? 
    element.correspondingElement : element
  ).classList.contains(ignoredClass);

const isInIgnoredElement = (element: Element, ignoredClass: string) => {
  do {
    if (hasIgnoredClass(element, ignoredClass)) {
      return true;
    }
  } while ((element = element.parentElement));
  return false;
};
function useOnClickOutside(
  refs: Array<any>, 
  handler: (e:MouseEvent | TouchEvent) => void,
  ignoreClass = 'ignore-class'
){
  React.useEffect(()=>{
    const listener = (e: MouseEvent | TouchEvent) => {
      const isValidElement = refs.some(ref => {
        if(!ref.current || ref.current.contains(e.target) || isInIgnoredElement(e.target, ignoreClass)){ return true; }
      });
      !isValidElement && handler(e);
    }
    document.addEventListener('mousedown', listener);
    document.addEventListener('touchstart', listener);

    return () => {
      document.removeEventListener('mousedown', listener);
      document.removeEventListener('touchstart', listener);
    };
  },[refs, handler]);

}

我有点警觉

属性'correspondingElement‘在类型'Element'. is (2339)中不存在。类型'null‘不能分配给’Element‘. to (2322)

我的钩子的合适类型是什么？

Answer 1

我想我找到了答案。

const hasIgnoredClass = (element: SVGAElement, ignoredClass: string) =>
  (element.correspondingElement ? element.correspondingElement : element).classList.contains(ignoredClass);

const isInIgnoredElement = (element: Node, ignoredClass: string) => {
  if (element === null) return;
  do {
    if (hasIgnoredClass(element as SVGAElement, ignoredClass)) {
      return true;
    }
  } while ((element = element.parentElement as Element));
  return false;
};
export default function useOnClickOutside(
  refs: Array<React.RefObject<HTMLElement>>,
  handler: (e: MouseEvent | TouchEvent) => void,
  ignoreClass = 'ignore-onClickOutside',
) {
  React.useEffect(() => {
    const listener = (e: MouseEvent | TouchEvent) => {
      const elem = e.target as Node;
      const isValidElement = refs.some(ref => {
        if (!ref.current || ref.current.contains(elem) || isInIgnoredElement(elem, ignoreClass)) {
          return true;
        }
      });
      !isValidElement && handler(e);
    };
    document.addEventListener('mousedown', listener);
    document.addEventListener('touchstart', listener);

    return () => {
      document.removeEventListener('mousedown', listener);
      document.removeEventListener('touchstart', listener);
    };
  }, [refs, handler]);
}

Answer 2

不确定，但试着做e.target as Element。

const listener = (e: MouseEvent | TouchEvent) => {
 const elem = e.target as Element;
      const isValidElement = refs.some(ref => {
        if(!ref.current || ref.current.contains(e.target) || isInIgnoredElement(elem, ignoreClass)){ return true; }
      });
      !isValidElement && handler(e);
    }