自定义hooks获取菜单位置及是否可见

import { useEffect, useState } from "react";

// 自定义useContextMenu获取菜单位置 以及是否可见
export const useContextMenu = (container) => {
	const [x, setX] = useState(null);
	const [y, setY] = useState(null);
	const [visible, setVisible] = useState(false);

	const showMenu = (e) => {
            e.stopPropagation();
            e.preventDefault();
            setX(e.clientX);
            setY(e.clientY);
            setVisible(true);
	};

	const closeMenu = () => {
            setVisible(false);
	};

	useEffect(() => {
            // 注册菜单事件
            container.addEventListener("contextmenu", showMenu);
            // 点击其他区域 关闭菜单
            // tips: 由于事件冒泡 菜单打开就会关闭 所以这两个事件应该在捕获阶段触发
            window.addEventListener("click", closeMenu, true);
            window.addEventListener("contextmenu", closeMenu, true);
            return () => {
                    container.removeEventListener("contextmenu", showMenu);
		};
	}, [container]);

	return {
            x,
            y,
            visible,
	};
};