common-hook/es/dom/useMouse.js

提供项目中常用的 React Hooks

import { useRafState, useEventListener } from "common-hook";
import { getTargetElement } from "../_utils/domTarget";
const initState = {
    screenX: NaN,
    screenY: NaN,
    clientX: NaN,
    clientY: NaN,
    pageX: NaN,
    pageY: NaN,
    elementX: NaN,
    elementY: NaN,
    elementH: NaN,
    elementW: NaN,
    elementPosX: NaN,
    elementPosY: NaN
};
export const useMouse = (target) => {
    const [state, setState] = useRafState(initState);
    useEventListener("mousemove", (event) => {
        const { screenX, screenY, clientX, clientY, pageX, pageY } = event;
        const newState = {
            screenX,
            screenY,
            clientX,
            clientY,
            pageX,
            pageY,
            elementX: NaN,
            elementY: NaN,
            elementH: NaN,
            elementW: NaN,
            elementPosX: NaN,
            elementPosY: NaN
        };
        const targetElement = getTargetElement(target);
        if (targetElement) {
            const { left, top, width, height } = targetElement.getBoundingClientRect();
            newState.elementPosX = left + window.pageXOffset;
            newState.elementPosY = top + window.pageYOffset;
            newState.elementX = pageX - newState.elementPosX;
            newState.elementY = pageY - newState.elementPosY;
            newState.elementW = width;
            newState.elementH = height;
        }
        setState(newState);
    }, {
        target: () => document
    });
    return state;
};