CSS pointer-event 속성

Web,HTML,CSS

와칸다개발자 2022. 7. 14. 18:31

ref

CSS 이벤트 제어(pointer-events ) 속성

흔히 이벤트가 부여된 요소를 숨기면 해당 이벤트가 작동하지 않을꺼라 생각합니다. 대부분 의도한 결과를 반영하지만 숨김처리에 사용한 방법이 opacity 속성을 이용한 경우라면 가시성은 없지

webdir.tistory.com

유저 이벤트를 피하고 싶을 때

display: none 을 한다거나

display: hidden 속성을 주게된다.

하지만 opacity 속성은 여전히 태그가 위치하게 되고 이벤트 또한 동작한다.

pointer-events

이 속성은 HTML 엘리먼트에 부여된 이벤트들을 제어할 수 있다.

속성값은 다음과 같다.

none : 클릭, 상태(hover,active등) 이벤트를 비활성화 한다.

auto : 비활성화된 이벤트를 다시 되돌린다.

inherit : 부모 요소로부터 pointer-events 값을 상속받는다.

abEKgKM

...

codepen.io

codepen 에서 pointer-events 속성을 주석 처리하거 풀고 나서 이벤트가 활성화 되는지 확인해보자.