pointer-events

pointer-events

MDN 링크 : https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events

/* Keyword values */
pointer-events: auto;
pointer-events: none;
pointer-events: visiblePainted;
pointer-events: visibleFill;
pointer-events: visibleStroke;
pointer-events: visible;
pointer-events: painted;
pointer-events: fill;
pointer-events: stroke;
pointer-events: all;

/* Global values */
pointer-events: inherit;
pointer-events: initial;
pointer-events: unset;

pointer-events 는 css로 이벤트 반응여부를 on/off 할 수 있게 합니다.

opacity: 0, visibility: hidden 같은 화면에 보이지 않게 처리 하는 css 는 화면에 안보이게 할 뿐이지 화면에 영역을 차지하고 있고

실제로 그 Node에 걸린 이벤트도 같이 동작하고 있습니다.

display: none; 은 화면에서 영역을 차지하고 있지 않고 그렇기에 그 Node 에 걸린 이벤트 또한 동작하지 않고 있습니다.

그러나 display: none; 이 적용되면 안되는 기능들도 필요하기 마련이지요.

하지만 그 영역에서 이벤트가 동작하면 안되기도 하고요.

그래서 이때 사용하는 css가 pointer-events라고 합니다.

Pointer-events의 속성으로 13가지가 있지만 뭐 inherit와 initial은 제외해야 할 것 같고..

나머지 11가지 중에서 8개는 SVG만을 위한 속성이라고 합니다.

그 3가지는 

pointer-events: auto;

pointer-events: none;

pointer-events: unset; 

인데 unset은 어떤 역할을 하는지는 잘.. 모르겠습니다.

당연히 none을 하면 자신에 걸린 이벤트가 동작안하고

auto면 풀리겠지요.

모바일 프로젝트를 할때 한번 적용해봄직도 좋을 것 같습니다.