Created
June 22, 2023 07:50
-
-
Save seia-soto/f508a9b163c312615c0c3e53a86d5c94 to your computer and use it in GitHub Desktop.
mousemove event without child elements
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment