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

CSS Property - pointer-events

흔히 이벤트가 부여된 요소를 숨기면 해당 이벤트가 작동하지 않을꺼라 생각합니다. 

대부분 의도한 결과를 반영하지만 숨김처리에 사용한 방법이 opacity 속성을 이용한 경우라면 가시성은 없지만 해당 영역의 이벤트에 응답하게 됩니다. 

이를 강제로 제어하기 위해서는 pointer-events 속성을 활용해야 하며 관련하여 추가적인 정보에 대해 알아봅니다.

숨김 처리 속성에 따른 특성

요소를 숨길때 사용하는 CSS 속성은 제각기 고유의 특성을 지니고 있습니다. 

아래의 표를 참고합니다.

숨김 속성과 값	공간 점유	이벤트	탭 접근 - tab
opacity: 0	점유	활성	가능
visibility: hidden	점유	비활성	불가능
visibility: collapse	테이블안에서만 비점유	비활성	불가능
display: none	비점유	비활성	불가능

이벤트가 비활성되는 속성들을 사용하면 좋겠지만, 트랜지션(전환)이나 애니메이션 같이 프레임별로 진행되는 효과를 요소에 부여하여 숨김처리를 하는 경우, opacity 이외에는 맞당한 방법이 없습니다. 

설상가상으로 해당 요소가 고정된 위치를 부여받을 경우(ex. position: fixed) 해당 요소는 원치않는 이벤트를 발생시킬 위험도가 높아집니다.

point-events 속성

위와 같이 어떤 경우에는 요소에 부여된 이벤트를 제거하거나 다시 활성화 시켜야하는 경우가 생길 수 있습니다.

pointer-events는 HTML 요소들의 마우스/터치 이벤트들(CSS hover/active, JS click/tap, 커서 드래그등)의 응답을 조정할 수 있는 속성입니다.

css

.hidden {
    opacity: 0;
    pointer-events: none;
}

pointer-events 속성은 11개의 속성값을 가지지만 3개를 제외하고는 모두 SVG에서 사용하도록 예약되어 있습니다. 

아래의 3개의 속성값은 HTML 요소들에서 사용 가능합니다.

• none : HTML 요소에 정의된 클릭, 상태(hover,active등), 커서 옵션들이 비활성화한다. 
• auto : 비활성화된 이벤트를 다시 기본 기능을 하도록 되돌린다. 
• inherit : 부모 요소로부터 pointer-events 값을 상속받는다.

나랏말싸미 듕귁에 달아 문자와로 서르 사맛디 아니할쎄 이런 전차로 어린 백셩이 니르고져 홇베이셔도 마참네 제 뜨들 시러펴디 몯핧 노미하니아 내 이랄 윙하야 어엿비너겨 새로 스믈 여듫 짜랄 맹가노니 사람마다 해여 수비니겨 날로 쑤메 뻔한킈 하고져 할따라미니라.

이 요소를 통과해서 드래그 가능

참고 자료

1. pointer-events
2. Does opacity:0 have exactly the same effect as visibility:hidden

[출처] WEBDIR

Jaehee's WebClub