[CSS] - pointer-events 를 활용한 커서 이벤트 활성화 / 비활성화

사용자는 주로 클릭이나 스크롤 등의 이벤트를 통해 웹과 상호작용하는데요, 특정 상황에서는 이런 이벤트를 비활성화해야할 때가 있습니다.

버튼의 경우에는 disabled 속성 등을 활용할 수 있지만, 일반적인 div 등의 태그에서는 어떻게 이벤트 실행을 방지할까요?

opacitity: 0으로 요소를 감춰도, 감춘 요소들이 계속 클릭되는 모습입니다.

🖱 pointer-events 활용하기

물론 자바스크립트를 통해 이벤트 수행을 제어할 수도 있겠지만 훨씬 더 간단한 방법이 있습니다.

바로 CSS의 pointer-events라는 속성을 활용하는 것인데요, pointer-events 속성을 none 으로 지정하면 마우스 커서가 이벤트를 발생시킬 수 없게 됩니다.

열심히 클릭해도 이벤트가 발생하지 않습니다!

당연히 리액트의 스타일 객체에서도 사용할 수 있으며, pointer-events 대신 pointerEvents 라는 속성명으로 사용하면 됩니다!

style={
    type !== null
        ? type === "contest"
        ? { animation: "1s moveRight1 forwards" }
        : {
            animation: "1s fadeout forwards",
            pointerEvents: "none",
            }
        : {}
}