mousemove event without child elements

App.tsx

import { styled } from "@stitches/react"
import { FC, useEffect, useRef } from "react"

const Outer = styled('div', {
  display: 'flex',
  flexDirection: 'row',
  flexGrow: 1,
  flexWrap: 'nowrap',
  height: '100vh',
  width: '100%',
})

const Inner = styled('div', {
  height: '100%',
  width: '100%',

  // 하위 요소에 대해 pointer-events를 'none'으로 설정하여 이벤트 발생을 방지합니다.
  // Outer에서 '& *': { pointerEvents: 'none' }을 사용할 수도 있겠습니다.
  pointerEvents: 'none',

  variants: {
    color: {
      left: {
        background: 'SlateBlue'
      },
      right: {
        background: 'Aquamarine'
      }
    }
  }
})

const App: FC = () => {
  const outRef = useRef(null)

  useEffect(() => {
    if (!outRef || !outRef.current) {
      return; // 개체가 로드되지 않았을 때에는 이벤트 리스너를 추가하거나 삭제하지 않습니다.
    }

    const target = outRef.current as HTMLDivElement

    const handleMouseMove = (e: HTMLElementEventMap['mousemove']) => {
      console.log(`offsetX: ${e.offsetX} offsetY: ${e.offsetY}`, e.target)
    }

    target.addEventListener('mousemove', handleMouseMove);

    // 이벤트 리스너는 꼭 정리해주세요.
    return () => {
      target.removeEventListener('mousemove', handleMouseMove);
    }
  }, [outRef])

  return (
    <Outer ref={outRef}>
      <Inner color='left'>
      </Inner>
      <Inner color='right'>
      </Inner>
    </Outer>
  )
}

export default App