ht_hooks/es/useClickAway/index.js

ht React 业务 Hooks

import useLatest from '../useLatest';
import { getTargetElement } from '../utils/domTarget';
import getDocumentOrShadow from '../utils/getDocumentOrShadow';
import useEffectWithTarget from '../utils/useEffectWithTarget';
export default function useClickAway(onClickAway,
//一个回调函数，点击目标外部时会调用这个函数。
target,
//指定目标元素，可以是一个或多个元素。当用户点击这些元素时，不会触发 onClickAway 回调。
eventName) {
  if (eventName === void 0) {
    eventName = 'click';
  }
  var onClickAwayRef = useLatest(onClickAway);
  useEffectWithTarget(function () {
    var handler = function (event) {
      var targets = Array.isArray(target) ? target : [target]; //将目标元素转换为数组
      if (targets.some(function (item) {
        var targetElement = getTargetElement(item); // 获取目标元素转换为实际DOM（设定的点击不触发的元素）
        // @ts-ignore
        return !targetElement || targetElement.contains(event.target); //#如果没设置目标元素或者点击事件发生在目标元素内部，则不应该触发 onClickAway 回调，返回 true
      })) {
        return;
      }
      onClickAwayRef.current(event); //#否则点击事件发生在目标元素外部，则执行回调函数
    };
    var documentOrShadow = getDocumentOrShadow(target);
    var eventNames = Array.isArray(eventName) ? eventName : [eventName];
    eventNames.forEach(function (event) {
      return documentOrShadow.addEventListener(event, handler);
    });
    return function () {
      eventNames.forEach(function (event) {
        return documentOrShadow.removeEventListener(event, handler);
      });
    };
  }, Array.isArray(eventName) ? eventName : [eventName], target);
}