web端不同交互(单击/双击/长按)的事件处理

业务需求中，有一些场景需要我们 对不同的事件交互类型响应不同的方法

以下是实现类似简单功能的代码：

const useMouseEvent = () => {
    const downTime = useRef<number>(0)
    const isDoubleClick = useRef<boolean>(false) // 是否为双击
    const checkOpenTimer = useRef<NodeJS.Timer>(null) // 记录单击方法是否执行

    const handleMouseDown = useCallback(() => {
        // 记录长按事件
        downTime.current = new Date().getTime()
        if (checkOpenTimer.current) {
            clearTimeout(checkOpenLinkTimer.current)
            checkOpenTimer.current = null
            isDoubleClick.current = true // checkOpenLink 还没有执行，为双击
        } else {
            isDoubleClick.current = false
        }
    }, [readOnly])

    const handleMouseUp = useCallback((e) => {
        const timeNow = new Date().getTime()
        // 长按不打开超链接
        if (timeNow - downTime.current <= 900) { 
            // 判断是不是双击, 如果是双击
            if (!isDoubleClick.current) {
                checkOpenTimer.current = setTimeout(() => {
                    // 处理单击事件方法
                    checkOpenTimer.current = null
                }, 200) // 点击不需要打开链接了
            } else {
                // 处理双击事件方法
            }
        }
    }, [])

    return {handleMouseDown, handleMouseUp}
}