ahooks/es/useMouse/index.js

react hooks library

import useRafState from '../useRafState';
import useEventListener from '../useEventListener';
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 default (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;
};